javascript 在 jQuery UI Sortable 之后获取 ID 数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20053146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get array of IDs after jQuery UI Sortable
提问by Nutic
I am using jQuery UI draggable and sortable functions and I am new to this. I have list of items in left (generated from database ) and I have boxes on right where user can drag and drop them. While/after dropping user can sort them.
我正在使用 jQuery UI 可拖动和可排序功能，我对此很陌生。我在左侧有项目列表（从数据库生成），右侧有框，用户可以在其中拖放它们。放下用户的同时/之后可以对它们进行排序。
Here is full preview : http://jsbin.com/oBeXiko/3
这是完整的预览：http: //jsbin.com/oBeXiko/3
Problem: How can I get array of IDs of elements in each box after sorting?
问题：如何在排序后获取每个框中元素的 ID 数组？
I have tried .sortable("toArray") and sortable("serialize") but both return empty string.
我试过 .sortable("toArray") 和 sortable("serialize") 但都返回空字符串。
Simple HTML
简单的 HTML
<div id="raspored">
<div class="left">
<ul id="kanta">Delete</ul>
<ul id="lista_predmeta" class="droptrue">
<li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
<li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
<li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
<li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
</ul>
</div>
<div class="right">
<ul class="raspored" razred="1">I</ul>
<ul class="raspored" razred="2">II</ul>
<ul class="raspored" razred="3">III</ul>
<ul class="raspored" razred="4">IV</ul>
</div>
</div>
My jQuery functions
我的 jQuery 函数
$(document).ready(function() {
var url = "";
var raz = 0;
$( ".raspored" ).sortable({
cursor: 'move',
opacity: 0.65,
stop: function ( event, ui){
var data = $(this).sortable('toArray');
console.log(data); // This should print array of IDs, but returns empty string/array
}
});
$(".raspored").droppable({
accept: ".predmet",
drop: function(event, ui){
ui.draggable.removeClass("predmet");
ui.draggable.addClass("cas");
raz = $(this).attr("razred");
}
});
$(".predmet").draggable({
connectToSortable:".raspored",
helper: "clone",
revert: "invalid",
stop: function(event, ui){
var predmet = $(this).attr("predmet-id") ;
console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
}
});
$("#kanta").droppable({
accept: ".cas",
drop: function(event, ui){
ui.draggable.remove();
}
});
$( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
});
回答by Agop
When you call toArray, you can pass an options object with an attributefield. This attributefield defines what attribute is used in the toArraycall. For example:
当您调用 时toArray，您可以传递一个带有attribute字段的选项对象。此attribute字段定义toArray呼叫中使用的属性。例如：
var data = $(this).sortable('toArray', { attribute: 'predmet-id' });
That will give you an array of the predmet-idattributes of the items. See the toArraydocumentation.
这将为您提供predmet-id项目属性的数组。请参阅toArray文档。
Note that the default attributeis id, which is why your array returned empty strings before - none of your elements have idattributes!
请注意，默认attribute值为id，这就是您的数组之前返回空字符串的原因 - 您的元素都没有id属性！
回答by Vijay Lathiya
use serialize that work for me. below are sample code that may help you.
使用对我有用的序列化。以下是可能对您有所帮助的示例代码。
<ul id="sortable">
<li id="ID_11" class="ui-state-default">sai</li>
<li id="ID_21" class="ui-state-default">2</li>
<li id="ID_3" class="ui-state-default">3</li>
<li id="ID_4" class="ui-state-default">4</li>
<li id="ID_5" class="ui-state-default">5</li>
<li id="ID_6" class="ui-state-default">6</li>
<li id="ID_7" class="ui-state-default">7</li>
<li id="ID_8" class="ui-state-default">8</li>
<li id="ID_9" class="ui-state-default">9</li>
<li id="ID_10" class="ui-state-default">10</li>
<li id="ID_11" class="ui-state-default">11</li>
<li id="ID_12" class="ui-state-default">12</li>
</ul>
<a href="javascript:void(0);" onClick="saveDisplayChanges();">Save</a>
<span id="categorysavemessage"></span>
Javascript code are :
Javascript代码是：
<script>
$(function() {
$( "#sortable" ).sortable();
});
function saveDisplayChanges()
{
var order = $("ul#sortable").sortable("serialize");
var a = "hello";
var b = "hi";
$.post("update_displayorder.php?"+order+"&a=hello"+"&b=developer",{abc:a,xyz:b},function(theResponse){
$("#categorysavemessage").html(theResponse);
});
}
</script>
Php script for fetch order data with other info update_displayorder.php script are :
用于获取带有其他信息 update_displayorder.php 脚本的订单数据的 PHP 脚本是：
<?php
echo "<pre>";
print_r($_REQUEST);
$newOrder = $_POST['ID'];
$counter = 1;
foreach ($newOrder as $recordIDValue) {
echo $counter .' '. $recordIDValue .'<br/>';
$counter ++;
}
?>
