2011-11-20 84 views
0

好吧,我正在處理一個問題,但問題消失了,所以我只是在努力製作一些東西。僅供參考,這不是重中之重,所以不要覺得有義務。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還是什麼?

回答

2

好吧,一會兒沒有碰到,而且沒有人接聽。好的,我做了交換功能。最大的問題是重新排列是從幾個我沒有看到的地方調用的(這就是爲什麼我放棄了傳遞給函數的兩個變量),並且n2被設置爲不同類型的排序。另外,交換不需要從我可以告訴JQuery的設置的父母那裏檢查。

要對其進行設置,這裏是我用來測試的HTML:

<html> 
<head> 
<script src="jquery-1.7.1.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> 
<!-- this is from the development bundle so that it can be seen easier --> 
<script src="jquery.ui.sortable.js" type="text/javascript"></script> 
<meta charset="utf-8"> 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } 
#sortable1 li { margin: 0 5px 5px 5px; padding: 3px; width: 40%; } 
#sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 30%; } 
</style> 
<script> 
    $(function() { 
     $(".sortable").sortable({ tolerance: 'pointer',cancel: ".ui-state-disabled",}); 
     $(".sortable li").disableSelection(); 
    }); 
</script> 
</head> 
<body> 
<ul class="sortable" id="sortable1"> 
    <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 1)</li> 
    <li class="ui-state-default ui-state-disabled">(I'm not sortable 2)</li> 
    <li class="ui-state-default">Item 4</li> 
    <ul class="sortable" id="sortable2"> 
     <li class="ui-state-default">sub 2</li> 
     <li class="ui-state-default">sub 3</li> 
    </ul> 
</ul> 
</body> 
</html> 

我使用了一些子節點來測試一些其他的事情也是如此。

在我包含的jquery.ui.sortable.js文件中,我做了以下更改。

對於函數_rearrange,我替換爲以下幾點:

_NodeHold_pos: false, 

// return what n1 get's swapped with 
nodeSwap: function(n1, n2) { 
    if (n1 && n2 && n1 !== n2) { 
     var n1h = n1.cloneNode(false); 
     n1.parentNode.replaceChild(n1h,n1); 
     n2.parentNode.replaceChild(n1,n2); 
     n1h.parentNode.replaceChild(n2,n1h); 
     return n2; 
    } 
    return n1; 
}, 

// _rearrange rework for specific sort 
_rearrange: function(event, i, a, hardRefresh) { 

    if (a) { 
     a[0].appendChild(this.placeholder[0]); 
     return; 
    } 

    var n1 = this.placeholder[0]; 
    var n2 = i.item[0]; 
    /* 
    // swap in place, from where you were last (during mouseovers) 
    this.nodeSwap(n1,n2); 
    /*/ 
    // swap from original position (before picking up node) 
    if (this._NodeHold_pos === false) { 
     this._NodeHold_pos = this.nodeSwap(n1,n2); 
    } else if (n2 === this._NodeHold_pos) { 
     this.nodeSwap(n1,n2); 
     this._NodeHold_pos = false; 
    } else if (n1 !== this._NodeHold_pos) { 
     this.nodeSwap(n1,this._NodeHold_pos); 
     this._NodeHold_pos = this.nodeSwap(n1,n2); 
    } else { 
     alert("here"); 
     this._NodeHold_pos = false; // shouldn't really reach this 
    } 
    //*/ 
    this.counter = this.counter ? ++this.counter : 1; 
    var self = this, counter = this.counter; 

    window.setTimeout(function(){ 
     if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove 
    },0); 
}, 

我加入這行_mousestop:

this._NodeHold_pos = false; 

現在工作正常。我使用了兩種不同的交換方式(因爲我不知道會出現什麼問題),但兩者看起來都是一樣的,所以選擇了代碼少的代碼。

我並沒有真正回答原來的問題,我開始了,但這是行得通的,所以這個問題得到了回答。