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 advice 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>
edit: if you comment out a part in rearrange2 (and have it being called) and just call swap:
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);
}
*/
You can see that swap sort of works. Maybe I should work that out first. It hangs sometimes and sometimes just pushes everything, but works for the most part. When testing, the nodes sometimes come undefined even when I can see them. Do I have to refresh the DOM or something?
Well, haven’t touched in a while, and since nobody is answering. Ok, I made the swap function work. The biggest problem was that rearrange was being called from a few places that I didn’t see (which is why I dropped two variables passed to the function) and that n2 was being set for a different type of sort. Plus, the swap didn’t need to check for parents from what I can tell of JQuery’s setup.
To set it up, here is the html that I used for test:
I used some sub nodes to test for some other things as well.
Within the file jquery.ui.sortable.js that I included, I made the following changes.
For the function _rearrange, I replaced with the following:
I added this line to _mousestop:
Works fine now. I used two different swaps (because I didn’t know what was going to be buggy), but both seem to work the same, so just picked the one with less code.
I’m not really done answering the original question that I started out, but this is working, so this question is answered.