jQuery的拖動列表更新

我有一個使用jQuery UI的拖拽排序，但是當我放棄的選項之一到一個列表我希望能夠告訴它是在列表類似下面做一個列表：jQuery的拖動列表更新

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

唯一的事情是我不知道如何做到這一點在我目前的jQuery和當我嘗試我失敗了，它不停地給我[對象] [對象]錯誤:)

這裏是我的代碼：

<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的方向是正確的，我真的很感激它。

預先感謝您！

來源

2012-08-09 Andrew

你想出來的這個是什麼？元素相對於父容器的索引？如果是這樣的話，我們可以測試'$（ui.item）.parent（）。子女（）。指數（ui.item）'這將給我們在那裏它已被刪除列表中的索引。 – Ohgodwhy 2012-08-09 02:16:47

好吧，我在MYSQL中有一列，它允許項目經理根據他/她的想法對列表進行排序 - 列表的編號是，例如（1 - 200），所以當我運行mysql查詢時，我按此列排序。我想要的是能夠找出列表中的行號或當前拖動的位置，以便我可以更新此列，然後更新前端列表。給出的示例URL有一個命令拖拽的例子，我試圖用我當前的列表來做到這一點.. - 你給我的代碼工作，非常感謝你回答我的問題:) – Andrew 2012-08-09 02:21:52

假設我們的列表項有一類的，「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 Sortable視角所需要的東西。

作爲一個側面說明

而且老實說，我可能也不會派一幫$就到更新我的工作表。我會創建一個臨時表來存儲所有的值，刪除多次提交的項目，以免重複。然後，我要求用戶使用提交按鈕（或每個確定的時間間隔）在某個位置保存位置。然後我會用在臨時表中找到的值更新真實的表格。完成後，我還會放下臨時表。

來源

2012-08-09 02:35:07 Ohgodwhy

jQuery的拖動列表更新

回答

相關問題