Хорошо, я работал над вопросом, но вопрос исчез, поэтому я просто работаю над тем, чтобы что-то сделать независимо. К вашему сведению, это не главный приоритет, поэтому не чувствую себя обязанным.
В любом случае, мне нужно несколько советов о том, куда идти с этим, потому что я не могу заставить его работать правильно. У меня есть узел подкачки вниз, но я не могу заставить его вернуться должным образом. Я не думаю, что я обращаюсь с элементами должным образом.
Первым шагом было получить обмен с движущимся элементом, поэтому в основном:
1 2 3 4 5
если 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 значение false
Я думаю, это было все, что я сделал, чтобы настроить его. В любом случае, протестировал обмен и, кажется, работает, но когда я пытаюсь вернуться обратно, я получаю отправленные нулевые узлы, и они продолжают зависать из-за этого. Я думаю, что это также вызывает странное поведение, поэтому я не уверен, куда идти с этим.
О, 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>
edit : если вы закомментируете деталь вrange (и она вызывается) и просто вызовите 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);
}
*/
Вы можете видеть, что этот тип обмена работает. Может быть, я должен решить это в первую очередь. Иногда зависает, а иногда просто толкает все, но работает по большей части. При тестировании узлы иногда оказываются неопределенными, даже когда я их вижу. Нужно ли обновлять DOM или что-то еще?