0

我有一个使用 Jquery UI 拖放排序的列表，但是当我将选项之一放入列表时，我希望能够知道它在列表中的位置，如下所示：

http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/

唯一的问题是我不确定如何围绕我当前的 Jquery 执行此操作，当我尝试失败时，它一直给我 [object] [object] 错误:)

这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript>
$( "#example1, #example2" ).sortable({
stop: function(event, ui) { 
var item = $(ui.item).parent().attr("id"); 
var moveid = $(ui.item).attr("id");
var sortableid = $(ui.item).sortable;
alert(item);
alert(moveid);
}}).disableSelection();
    });
</script>


<div class="box">
<ul id="example1" class='droptrue'>
<li id="id1" class="ui-state-default boxclass">ABC</li>
</ul>
</div>

<div class="box">
<ul id="example2" class='droptrue'>
<li id="id2" class="ui-state-default boxclass">XYZ</li>
</ul>
</div>

如果你们中的任何人能够向我展示如何使用 javascript 或 jquery 做到这一点的正确方向，我将不胜感激。

先感谢您！

4

1 回答 1

1

假设我们的列表项有一个类“list_item”。

HTML ->

<ul>
   <li class="list_item" id="some_unique_identifier1"> List Item 197 </li>
   <li class="list_item" id="some_unique_identifier2"> List Item 3 </li>
   <li class="list_item" id="some_unique_identifier3"> List Item 55 </li>
   <li class="list_item" id="some_unique_identifier4"> List Item 104 </li>
   ...etc
</ul>

jQuery 可排序 ->

$(function(){
  $('ul').sortable({
    stop: function(event, ui){
      var list_item_id = $(ui.item).prop('id');
      var list_item_position =$(ui.item).parent().children().index(ui.item);

      $.ajax({
        type: 'POST',
        url: '/path/to/my/controller.ext',
        data: { 'id' : list_item_id, 'list_position' : list_item_position}
      });
    }
  }).disableSelection();
});

PHP 控制器将是最困难的部分。您必须（显然）更新我们移动的行，并且我们必须用 +1 更新该行之后的所有其他行，因为它们都将在列表中获得 1 个索引位置。从这里创建正确的工作流程取决于您，但您可以从 jQuery 可排序的角度了解所需的内容。

作为旁注

老实说，我可能不会发送一堆 $.ajax 来更新我正在使用的表。我会创建一个临时表来存储所有值，删除多次提交的项目，这样你就没有重复项。然后我会要求用户在某个时候使用提交按钮（或每个确定的间隔）保存位置。然后我会用临时表中的值更新真实表。完成后，我也会删除临时表。

于 2012-08-09T02:35:07.197 回答