0
좋아, 내가 질문을하고 있지만, 질문이 사라져서, 그래서 나는 무언가를 만들고있다. 참고로, 최우선 순위가 아니므로 의무감을 느끼지 마십시오.sortable의 jquery 스왑 정렬
어느 쪽이든, 제대로 작동하지 않기 때문에 어디로 가야할지 조언이 필요합니다. 나는 노드 스왑 다운을 가지고 있지만, 제대로 스왑 할 수는 없다. 나는 요소들을 적절히 다루지 않는다고 생각합니다.
1 2 3 4 5
한 후 2 이상이면 (x는 1 셀 들고)
첫 번째 단계는 스왑 그래서, 기본적으로 이동하는 원소로 가야했다 :
X 2 3 4 5
1이면 3 이상 :
2 3 4 5 X
이것은 내가 지금까지 가지고있는 것입니다. "_rearrange"전화 교환에서 "정렬"합니다 ($) 기능 "_mouseDrag"에서
_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);
},
는 토글 설정, "_rearrange2"기능 "_mouseStop"에서
//* <-- add '/' in front for this or remove for next
this._rearrange(event, item);
/*/
this._rearrange2(event,item);
//*/
를 추가하는 것입니다 "_NodeHold_pos"를 거짓으로 되 돌린다
나는 그것이 내가 설정 한 전부라고 생각한다. 어느 쪽이든, 스왑을 테스트하고 작동하는 것처럼 보이지만 다시 되돌리려 고 할 때 null 노드가 계속 전송되어 계속해서 멈추게됩니다. 나는 이것이 이상한 행동을 일으킨다 고 생각한다.
아, 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 등을 새로 고쳐야합니까?