Ok, I was working on a question, but the question disappeared, so I’m just working on making something regardless. FYI, it’s not top priority, so don’t feel obligated.
Either way, I need some advise on where to go with this, because I can’t get it to work correctly. I have the node swap down, but can’t get it to swap back properly. I don’t think I’m handling the elements properly.
The first step was to get a swap going with the element that is moving, so basically:
1 2 3 4 5
if 1 is over 2 then (x is holding cell for 1):
2 X 3 4 5
if 1 is over 3 then:
3 2 X 4 5
This is what I have so far. In “sortable” (the $ )
_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);
},
in the function “_mouseDrag”, replaced “_rearrange” call will a toggle to add “_rearrange2″
//* <-- add '/' in front for this or remove for next
this._rearrange(event, item);
/*/
this._rearrange2(event,item);
//*/
in the function “_mouseStop”, set “_NodeHold_pos” back to false
I think that was all I did to set it up. Either way, tested out the swap and seems to work, but when I try to swap back, I keep getting null nodes sent and they keep getting stuck because of it. I think that causes the odd behavior as well, so unsure where to go with this.
Oh, the html (this is from a demo):
<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>
