如何跟蹤元素在可排序列表中的位置更改時的位置?jQuery UI可排序位置
回答
您可以使用提供給事件ui
對象,特別是你想要的stop
event的ui.item
property和.index()
,像這樣:
$("#sortable").sortable({
stop: function(event, ui) {
alert("New position: " + ui.item.index());
}
});
You can see a working demo here,記得.index()
值是從零開始的,所以你可能想要爲顯示目的+1。
我不太清楚我會在哪裏存儲起始位置,所以我想詳細說明David Boikes的評論。我發現我可以變量存儲在ui.item對象本身和停止功能檢索它像這樣:
$("#sortable").sortable({
start: function(event, ui) {
ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
console.log("Start position: " + ui.item.startPos);
console.log("New position: " + ui.item.index());
}
});
你救了我的一天!先生的問題,我怎樣才能通過使用AJAX保存新的位置? – mrrsb 2013-03-12 00:43:23
爲什麼他們在可排序的手冊頁上沒有這樣的簡單示例?我真的沒有意識到'start'中的項目能夠在'stop'範圍內,直到我看到這個。 – Sablefoste 2015-06-15 22:24:01
我不明白爲什麼這樣的通用功能不是可排序的一部分... – burzum 2017-02-23 12:47:56
使用更新代替停止
http://api.jqueryui.com/sortable/
更新(事件,UI)
類型:sortupdate
當用戶停止排序並且DOM 位置發生更改時,將觸發此事件。
。
停止(事件,UI)
類型:sortstop
此事件排序時已經停止被觸發。事件類型:事件
一段代碼:
<script type="text/javascript">
var sortable = new Object();
sortable.s1 = new Array(1, 2, 3, 4, 5);
sortable.s2 = new Array(1, 2, 3, 4, 5);
sortable.s3 = new Array(1, 2, 3, 4, 5);
sortable.s4 = new Array(1, 2, 3, 4, 5);
sortable.s5 = new Array(1, 2, 3, 4, 5);
sortingExample();
function sortingExample()
{
// Init vars
var tDiv = $('<div></div>');
var tSel = '';
// ul
for (var tName in sortable)
{
// Creating ul list
tDiv.append(createUl(sortable[tName], tName));
// Add selector id
tSel += '#' + tName + ',';
}
$('body').append('<div id="divArrayInfo"></div>');
$('body').append(tDiv);
// ul sortable params
$(tSel).sortable({connectWith:tSel,
start: function(event, ui)
{
ui.item.startPos = ui.item.index();
},
update: function(event, ui)
{
var a = ui.item.startPos;
var b = ui.item.index();
var id = this.id;
// If element moved to another Ul then 'update' will be called twice
// 1st from sender list
// 2nd from receiver list
// Skip call from sender. Just check is element removed or not
if($('#' + id + ' li').length < sortable[id].length)
{
return;
}
if(ui.sender === null)
{
sortArray(a, b, this.id, this.id);
}
else
{
sortArray(a, b, $(ui.sender).attr('id'), this.id);
}
printArrayInfo();
}
}).disableSelection();;
// Add styles
$('<style>')
.attr('type', 'text/css')
.html(' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }')
.appendTo('head');
printArrayInfo();
}
function printArrayInfo()
{
var tStr = '';
for (tName in sortable)
{
tStr += tName + ': ';
for(var i=0; i < sortable[tName].length; i++)
{
// console.log(sortable[tName][i]);
tStr += sortable[tName][i] + ', ';
}
tStr += '<br>';
}
$('#divArrayInfo').html(tStr);
}
function createUl(tArray, tId)
{
var tUl = $('<ul>', {id:tId, class:'sortableClass'})
for(var i=0; i < tArray.length; i++)
{
// Create Li element
var tLi = $('<li>' + tArray[i] + '</li>');
tUl.append(tLi);
}
return tUl;
}
function sortArray(a, b, idA, idB)
{
var c;
c = sortable[idA].splice(a, 1);
sortable[idB].splice(b, 0, c);
}
</script>
- 1. Jquery UI可排序
- 2. 內置可排序列表的JQuery UI可排序部分(div)
- 3. 如何獲得可排序的jQuery UI的「佔位符」配置?
- 4. jquery可排序的UI保存tr位置
- 5. 從jquery UI排序重置排序
- 6. jQuery UI可排序問題
- 7. jQuery UI可排序公差
- 8. jQuery UI可排序和可選
- 9. jquery排序img的位置
- 10. jQuery UI的排序
- 11. 帶有Bootstrap行的jQuery UI可排序佔位符
- 12. jQuery UI可排序 - 需要刪除絕對定位
- 13. JQuery UI可排序佔位符樣式問題
- 14. 位置()在jquery ui
- 15. JQuery-UI ToolTip位置
- 16. jQuery ui可排序的表格刷新裏面的數字位置
- 17. 通過jQuery的UI可排序變量
- 18. IE7的JQuery UI可排序的問題
- 19. 使用jQuery UI的Knockoutjs可排序
- 20. jQuery UI可排序:多項選擇
- 21. jQuery UI可排序表句柄
- 22. jQuery UI:如何保存「可排序」?
- 23. jQuery UI可以選擇框排序
- 24. 替代jQuery ui可排序需要
- 25. JQuery UI可排序按鈕集
- 26. jQuery UI可排序的動畫轉換
- 27. jQuery UI可排序窗口滾動
- 28. jQuery可排序UI語法問題
- 29. jQuery UI的可排序的子觸發
- 30. jQuery UI可排序和對話
作爲附加的註釋,如果你想跟蹤這些移動的項目來自(移動從位置0到位置2)那麼您需要訪問啓動事件中的ui.item.index()值並存儲該值。 – 2012-04-10 14:23:09
有沒有辦法在#sortable div中找到可排序的portlet div-id? – Frank 2013-06-12 12:43:59
i_a做了什麼@David Boike寫道:http://stackoverflow.com/a/12962399/114029 – 2013-12-21 19:02:21