うーん・・・

タグの表示順を入れ替え、

解決済

質問者：R.
質問日時：2015/04/19 20:27
回答数：1件

イメージは、各、li タグ等の横に、「上に 1 つ進むボタン」、「下に 1 つ進むボタン」が
並列して設置してあり、そのボタンをクリックすることで、表示順を入れ替えます。
また、テキストを入れ替えた順に、取得したいと考えています。
テキストは json 化します。

jQueryUI Sortable が近いのですが、クリックではなく、ドラッグ&ドロップで、
使用するため使えません。

わかる方、どうぞよろしくお願いいたします。

非常によくできて、良い参考になります。
あとは、表示順を変更した後、その変更順のとおりに、
テキストを json に流し込めれば完璧なのかもしれません。
ありがとうございます !

No.1の回答に寄せられた補足コメントです。補足日時：2015/04/20 22:00
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2015/04/20 13:18

個人的にはドラッグ＆ドロップの方が使いやすいように感じますが…

細かなところがよくわからないので適当ですが、こんな感じでしょうか？
※ 少し古いブラウザも対象にしています。
※ 最近のブラウザ限定ならquerySelectorやforEach、map等が使えるので
　もっと簡潔にすることができるでしょう。

（全角空白は半角に）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
ul.moveable, ul.moveable>li { list-style-type:none; margin:0; padding:0; }
ul.moveable { padding-left:3.5em; }
ul.moveable>li { position:relative; background-color:#ddd; margin-bottom:0.3em; }
ul.moveable>li div.control { position:absolute; top:0; left:-3.5em; }
ul.moveable>li div.control button { margin-right:0.3em; padding:0; font-size:x-small; }
</style>
</head>
<body>

<ul class="moveable">
<li><div>#1 item</div></li>
<li><div>#2 item</div></li>
<li><div>#3 item</div></li>
<li><div>#4 item</div></li>
<li><div>#5 item</div></li>
<li><div>#6 item</div></li>
</ul>

<script type="text/javascript">
(function(){
　var uls = document.getElementsByTagName("ul");
　var ctrl = createControl();
　var ul, i, lis, li, j;

　for(i = 0; ul = uls[i++];){
　　if(ul.className == "moveable"){
　　　addEvent(ul, "click");
　　　lis = liList(ul);
　　　for(j = 0; li = lis[j++];) setControl(li);
　　}
　}

　function handler(evt){
　　var t = evt.target || evt.srcElement;
　　if(t.nodeName != "BUTTON" || t.parentNode.className != "control") return;

　　var li = t.parentNode.parentNode;
　　var ul = li.parentNode, lis = liList(ul);
　　var idx = 0, cls = t.className;
　　while(lis[idx] != li) idx++;

　　if(cls == "_UP" && idx>0) ul.insertBefore(li, lis[idx-1]);　
　　else if(cls == "_DN") ul.insertBefore(li, lis[idx+2] || null);
　}

　function addEvent(e, typ){
　　if (e.addEventListener) e.addEventListener(typ, handler, false);
　　else if(e.attachEvent) e.attachEvent("on" + typ, handler);
　}

　function liList(ul){
　　var i, li, lis = [], elms = ul.childNodes;
　　for(i = 0; li = elms[i++];) if(li.nodeName == "LI") lis.push(li);
　　return lis;
　}

　function setControl(li){
　　li.insertBefore(ctrl.cloneNode(true), li.firstChild);
　}

　function createControl(){
　　var ctrl = document.createElement("div");
　　ctrl.className = "control";
　　ctrl.appendChild(createButton("_UP", "△"));
　　ctrl.appendChild(createButton("_DN", "▽"));
　　return ctrl;
　}

　function createButton(cls, txt){
　　var b = document.createElement("button");
　　b.appendChild(document.createTextNode(txt));
　　b.value = txt;
　　b.className = cls;
　　return b;
　}
})();

</script>
</body>
</html>