javascript - 2 つの項目があるリストを並べ替える方法

Question

こんにちは、プラグインなどを使用せずに、HTML5 と純粋な JavaScript のみを使用して、この 2 つの項目を並べ替え可能にしたいと考えています。

<ul ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" 
 ondragover="return dragOver(event)">
  <li draggable="true" ondragstart="return dragStart(event)">Item 1</li>
  <li draggable="true" ondragstart="return dragStart(event)">Item 2</li>
</ul>

よく私は試しました：

function dragStart(ev) {
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('class'));

    return true;
}

function dragEnter(ev) {
    event.preventDefault();
    return true;
}

function dragOver(ev) {
    return false;
}

function dragDrop(ev) {
    var src = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(src));
    ev.stopPropagation();
    return false;
}

Answer 1

アルファベット順に並べますか？これは、ライブラリを使用しないソリューションです。

var items = document.getElementsByTagName("li");

var values = [];

for(var i = 0; i < items.length; i++) {
    values.push(items[i].innerHTML);
}

values.sort();

for(var i = 0; i < items.length; i++) {
    items[i].innerHTML = values[i];
}

http://jsfiddle.net/GG9gG/

Answer 2

jsfiddle:

http://jsfiddle.net/pMcmL/6/

HTML:

<ul id="sortable">
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 1
    </li>
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 2
    </li>
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 3
    </li>
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 4
    </li>
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 5
    </li>
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 6
    </li>
    <li class="ui-state-default">
        <span>&#x21C5;</span><input type="text"/>Item 7
    </li>
</ul>

CSS:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css

+

li {
    margin: 1px;
    width: 130px;
    padding:2px;
    vertical-align:middle;
}

li span {
    color: gray;
    font-size: 1.1em;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
    height:100%;
}

input[type="text"] {
    width: 32px;
    margin-right: 5px;
    border: 1px solid lightgay;
    color: blue;
    text-align: center;
}

Javascript:

sort_ul = $('#sortable');                  // * sortable <ul>
itemsCount = $('#sortable li').length;     // * total number of items
function updateIndexes() {                 // * function to update
    $('#sortable li input').each(          //   items numbering
      function(i) {
        $(this).val(i + 1);
    });
}
updateIndexes();                           // * start by update items numbering
sort_ul.sortable({handle: 'span',          // * apply 'sortable' to <ul>
                  stop: function(event, ui){
                          updateIndexes(); // * when sorting is completed,
                        }                  //   update items numbering
});
$('#sortable li input').keyup(             // * watch for keyup on inputs
  function(event) {
    if (event.keyCode == '13') {           // * react only to ENTER press
        event.preventDefault();            // * stop the event here
        position = parseInt($(this).val());// * get user 'new position'
        li = $(this).parent();             // * store current <li> to move
        if (position >= 1                  // * proceed only if
            && position <= itemsCount){    //   1<=position<=number of items
          li.effect('drop', function(){    // * hide <li> with 'drop' effect
            li.detach();                   // * detach <li> from DOM
            if (position == itemsCount)
              sort_ul.append(li);          // * if pos=last: append
            else                           //   else: insert before position-1
              li.insertBefore($('#sortable li:eq('+(position - 1)+')'));
            updateIndexes();               // * update items numbering
            li.effect('slide');            // * apply 'slide' effect when in
          });                              //   new position
        }else{ li.effect('highlight'); }   // * if invalid position: highlight
}}});

参照リンク