使用 Javascript/Jquery 上下移動 div 更改 ID Num

Question

我希望能夠在上下移動 div 時更改 ID，這樣我就可以將它們的數字提交給 MySQLi ...

所以基本上從

<div id="1" class='col1'>1</div>
<div id="2" class='col2'>2</div>
<div id="3" class='col3'>3</div>
<div id="4" class='col4'>4</div>
<div id="5" class='col5'>5</div>

到

<div id="5" class='col1'>1</div>
<div id="2" class='col2'>2</div>
<div id="4" class='col3'>3</div>
<div id="1" class='col4'>4</div>
<div id="3" class='col5'>5</div>

或類似的東西...

HTML

    <div id='items'>
                <div id="1" class='col1'>1</div>
                <div id="2" class='col2'>2</div>
                <div id="3" class='col3'>3</div>
                <div id="4" class='col4'>4</div>
                <div id="5" class='col5'>5</div>

            </div>

    <a href="#" id="up">Up</a>
    <a href="#" id="down">Down</a>

JS

    $(document).ready(function(){
        var selected=0;

         var itemlist = $('#items');
        var len=$(itemlist).children().length; 

        $("#items div").click(function(){
            selected= $(this).index();
            alert("Selected item is " + $(this).text());
        });


         $("#up").click(function(e){
           e.preventDefault();
           if(selected>0)
            {
                jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                selected=selected-1;
            }
        });

         $("#down").click(function(e){
             e.preventDefault();
            if(selected < len)
            {
                jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                selected=selected+1;
            }
        });




    });

CSS

    #items div{
      width:100px;
      height:20px;
      border:1px solid #000;
      margin-top:2px;
      text-align:center
    }
    div .col1{
      background-color:#000;
      color:#fff
    }
    .col2{
      background-color:#0f0;
    }
    .col3{
      background-color:#00f;
      color:#fff
    }
    .col4{
      background-color:#f00;
      color:#fff
    }
    .col5{
      background-color:#ff0;

    }

一切都在移動，但不知何故，如果可能的話，我需要它來更改 ID，然后它將按該順序排序。

這可能嗎？ 如果是這樣，請有人幫助我。

Answer 1

您可以獲取項目列表或案例中的歌曲，然后在更改項目位置時迭代每個項目。 這樣您就可以保留元素 ID，但您可以在需要時使用准確的排序編號來存儲服務器端。 在 JS 中，你可以做這樣的事情：

$(document).ready(function(){
        var selected=0;

        var itemlist = $('#items');
        var len=$(itemlist).children().length; 

        $("#items div").click(function(){
            selected= $(this).index();
            alert("Selected item is " + $(this).text());
        });


         $("#up").click(function(e){
           e.preventDefault();
           if(selected>0)
            {
                jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                selected=selected-1;
                changeSortOrder();
            }
        });

         $("#down").click(function(e){
             e.preventDefault();
            if(selected < len)
            {
                jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                jQuery($(itemlist).children().eq(selected-1)).attr('data-sort', selected + 1);
                selected=selected+1;
                changeSortOrder();
            }
        });
    });

    function changeSortOrder() {
      var listItems = $('#items').children();

      for (var item in listItems) {
        listItems[item].setAttribute('data-sort', parseInt(item) + 1);
      }
    }

增加的功能是主要的外賣。

function changeSortOrder() {
    var listItems = $('#items').children();

    for (var item in listItems) {
        listItems[item].setAttribute('data-sort', parseInt(item) + 1);
    }
}

這里發生的事情是您獲取列表中的所有這些項目，然后通過迭代每個項目來重新分配它們的排序編號。 因此，當您將項目 1 向下移動到位置 2 時，您會看到項目 2 現在將其排序位置設置為 1，而不是列表中的每個元素的 2，依此類推。

例如，這里是選擇項目 1 並單擊 -> down 后 HTML 的樣子：

<div id="2" sort="1" class='col'>2</div>
<div id="1" sort="2" class='col1'>1</div>
<div id="3" sort="3" class='col3'>3</div>
<div id="4" sort="4" class='col4'>4</div>
<div id="5" sort="5"  class='col5'>5</div>

請參閱此處的 JS fiddle以獲取一個工作示例，以更好地說明這一點。