Поиск индекса элемента в списке после перетаскивания пользовательского интерфейса JQuery

Question

У меня есть список элементов, каждый элемент имеет идентификатор, равный его порядку в этом списке. Теперь я меняю порядок этих элементов, перетаскивая их.

У меня следующие два вопроса:

1. Как я могу добиться эффекта, что, когда элемент таскает, он будет толкать вверх или вниз элементы, которые находятся выше или ниже его?

2. Я хочу динамически изменять идентификаторы этих элементов в их порядке в списке. Например, предположим, что есть четыре элемента, когда первый элемент перетаскивается в нижнюю часть, его идентификатор будет изменяться на 3, и иды элементов над ним соответственно изменятся. (Обратите внимание, что элементы не обязательно одинаковой высоты.)

Вот отрывок из моего кода, вы можете получить доступ к http://jsfiddle.net/shapeare/bL8jz3rp/4/, чтобы увидеть более подробную код:

<div id="container"> 
    <div class="draggable" id="0"> 
     <p> dummy text </p> 
     <p> dummy text </p> 
    </div> 

    <div class="draggable" id="1"> 
     <p> dummy text dummy text </p> 
    </div> 

    <div class="draggable" id="2"> 
     <p> dummy text dummy text dummy text </p> 
    </div> 

    <div class="draggable" id="3"> 
     <p> dummy text dummy text dummy text </p> 
    </div> 

</div> 

Answer 1

Вы можете достичь первой функции с помощью jQuery ui sortable widget, а Санджив уже указывал.

Чтобы ответить на ваш второй вопрос, вы можете использовать index() метод внутри update событие дозвона сортируется, как показано ниже:

$("#container").sortable({ 
 
    update: function(e, ui) { 
 
    $("#container div").each(function(i, elm) { 
 
     $elm = $(elm); // cache the jquery object 
 
     $elm.attr("id", $elm.index("#container div")); 
 
     // below is just for demo purpose 
 
     $elm.text($elm.text().split("id")[0] + "id: " + $elm.attr("id")); 
 
    }); 
 
    } 
 
});

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<div id="container"> 
 
    <div class="draggable" id="0"> 
 
    <p>dummy text</p> 
 
    </div> 
 

 
    <div class="draggable" id="1"> 
 
    <p>dummy text dummy text</p> 
 
    </div> 
 

 
    <div class="draggable" id="2"> 
 
    <p>dummy text dummy text dummy text</p> 
 
    </div> 
 
    <div class="draggable" id="3"> 
 
    <p>dummy text dummy text dummy text</p> 
 
    </div> 
 

 
</div>

---

Связанные answer (шахта)

Answer 2

Изменение идентификаторов не является хорошая практика.
Однако вы можете достичь такого же affet путем изменения класса $('.my_class').removeClass('my_class').addClass('normal_element');

Но и может изменить идентификатор, как этот $('#your_element').attr('id','the_new_id');
В ваших проблемах, вы можете использовать JQuery UI Сортируемого плагин и получить заказ идентификаторов в массиве.
Затем вы можете добавить или удалить класс для достижения аффектов.

Проверьте приведенный ниже пример. Он показывает, как использовать сортировку и получить порядок идентификаторов в массиве. Для получения более подробной информации о методах проверки документ: http://jqueryui.com/sortable/

$(function(){ 
 
    
 
    $("#sortable").sortable(); 
 
    var idArr=$(".myList").sortable("toArray"); 
 
    jQuery(".IdList").text(idArr.join()); 
 
    $(".myList").sortable({ 
 
     stop: function(event, ui) { 
 
      
 
       var idArr=$(".myList").sortable("toArray"); 
 
       jQuery(".IdList").text(idArr.join()); 
 
    
 
     
 
     } 
 
    }); 
 
     
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
<strong>Id Order:</strong><div class="IdList"></div><br /> 
 
<strong>Drag Items to reorder</strong><br /> 
 
<ul id="sortable" class="myList"> 
 
    <li id="1">Item 1</li> 
 
    <li id="2">Item 2</li> 
 
    <li id="3">Item 3</li> 
 
    <li id="4">Item 4</li> 
 
    <li id="5">Item 5</li> 
 
</ul>