好吧,我正在處理一個問題,但問題消失了,所以我只是在努力製作一些東西。僅供參考,這不是重中之重,所以不要覺得有義務。jquery交換排序排序
無論哪種方式,我需要一些建議,因爲我無法讓它正常工作。我有節點掉換,但不能讓它正確交換。我不認爲我正在處理這些元素。
的第一步是得到一個交換與被移動的元件去,所以基本上:
如果1是超過2,則(x被保持細胞1) :
2 X 3 4 5
如果1是然後經3:
3 2 X 4 5
這是我到目前爲止。在 「排序」(即$)
_NodeHold_pos: false,
// return what n1 get's replaced with
nodeSwap: function(n1, n2) {
// not null and not same node and both have parents
// hmm, !n1.isSameNode(n2) doesn't work here for some reason
if (n1 && n2 && n1 != n2 && n1.parentNode && n2.parentNode) {
// if they don't have same parent, we need to make sure they don't contain each other (untested)
if (!n1.parentNode.isSameNode(n2.parentNode)) {
prnt = n1.parentNode;
while (prnt) {
if (prnt.isSameNode(n2)) return;
}
prnt = n2.parentNode;
while (prnt) {
if (prnt.isSameNode(n1)) return;
}
}
n1h = n1.cloneNode(true);
n1.parentNode.replaceChild(n1h,n1);
n2.parentNode.replaceChild(n1,n2);
n1h.parentNode.replaceChild(n2,n1h);
//sn2.parentNode.removeChild(n1h);
return n2;
}
return n1;
},
_rearrange2: function(event, i) {
var n1 = this.placeholder[0];
var n2 = (this.direction == 'down' || !i.item[0].nextSibling? i.item[0] : i.item[0].nextSibling);
if (n2 && !this._NodeHold_pos) {
this._NodeHold_pos = this.nodeSwap(n1,n2);
} else if (n2) {
var hold = n1;
this.nodeSwap(n1,this._NodeHold_pos);
this._NodeHold_pos = this.nodeSwap(n1,n2);
}
//Various things done here to improve the performance:
// 1. we create a setTimeout, that calls refreshPositions
// 2. on the instance, we have a counter variable, that get's higher after every append
// 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
// 4. this lets only the last addition to the timeout stack through
this.counter = this.counter ? ++this.counter : 1;
var self = this, counter = this.counter;
window.setTimeout(function() {
if(counter == self.counter) self.refreshPositions(true); //Precompute after each DOM insertion, NOT on mousemove
},0);
},
在函數 「_mouseDrag」
,改爲 「_rearrange」 電話會切換到加 「_rearrange2」
//* <-- add '/' in front for this or remove for next
this._rearrange(event, item);
/*/
this._rearrange2(event,item);
//*/
在函數 「_mouseStop」
,設置「_NodeHold_pos」回到假
我想這就是我所做的設置。無論哪種方式,測試了交換和似乎工作,但是當我嘗試交換時,我不斷收到空節點發送,他們繼續卡住,因爲它。我認爲這也會導致奇怪的行爲,所以不確定該怎麼辦。
呵呵,HTML(這是從演示):
<html>
<head>
<script src="../jquery-1.7.min.js" type="text/javascript"></script>
<script src="../jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../jquery-ui-1.8.16.custom.css"></link>
<script src="../jquery/development-bundle/ui/jquery.ui.sortable.js" type="text/javascript"></script>
</head>
<body>
<meta charset="utf-8">
<style>
#sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
#sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
</style>
<script>
$(function() {
$("#sortable2").sortable({ tolerance: 'pointer',
//items: "li:not(.ui-state-disabled)",
cancel: ".ui-state-disabled",
});
$("#sortable2 li").disableSelection();
});
</script>
<div class="demo">
<h3 class="docs">Cancel sorting (but keep as drop targets):</h3>
<ul id="sortable2">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
<li class="ui-state-default">Item 4</li>
</ul>
</div>
</body>
</html>
編輯:如果您註釋掉rearrange2的一部分(而且有它被稱爲)並調用交換:
this.nodeSwap(n1,n2);
/*
if (n2 && !this._NodeHold_pos) {
this._NodeHold_pos = this.nodeSwap(n1,n2);
} else if (n2) {
var hold = n1;
this.nodeSwap(n1,this._NodeHold_pos);
this._NodeHold_pos = this.nodeSwap(n1,n2);
}
*/
你可以看到交換排序的作品。也許我應該先解決。它有時會掛起,有時會推動一切,但大部分工作。在測試時,即使我看到它們,節點有時也不確定。我需要刷新DOM還是什麼?