使用Mootools對錶格行排序

嗯，我正在嘗試使用Mootools在表格上實施拖放可排序行。我是今天上午所有的敲我的頭，可以計算出它的解決這個問題，這裏的HTML表：使用Mootools對錶格行排序

<table class="table table-bordered"> 
    <tbody> 
    <tr class="item"> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
    </tr> 
    <tr class="item"> 
     <td>Jacob</td> 
     <td>Thornton</td> 
     <td>@fat</td> 
    </tr> 
    <tr class="item"> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
    </tbody> 
</table>

而這裏的javascipt的：

window.addEvent('domready', function() { 
    /* create sortables */ 
     var d = $$('tr'); 
    var sb = new Sortables(d, { 
    /* set options */ 
    clone:true, 
    revert: true, 
    /* initialization stuff here */ 
    initialize: function() { 

    }, 
    /* once an item is selected */ 
    onStart: function(el) { 
     el.setStyle('background','#add8e6'); 
    }, 
    /* when a drag is complete */ 
    onComplete: function(el) { 
     el.setStyle('background','#ddd'); 
     //build a string of the order 

    } 
    }); 
});

而且這裏有一個jsfiddle。非常感激。

來源

2015-02-24 user3350731

你到底做了什麼？你能解釋更多你想要達到的功能麼？ – Sergio 2015-02-24 15:13:58

你的代碼適合我，請更清楚什麼不適合你... – Sergio 2015-02-26 02:15:16

Sortable將抓取列表中的每個孩子並使他們可以排序。您有針對性的tr元素 - 這使td元素可排序。我想你想要定位tbody，以便tr元素可排序，而不是每個td。看到這裏：[更新的小提琴]（http://jsfiddle.net/t1tht0p9/1/） – Eclectic 2015-03-06 01:01:58

這裏是您所遇到的問題，據我瞭解：

你想使行排序？你的Fiddle例子有所有單元格可單獨排序。

你的問題就在這裏：

var d = $$('tr'); 
var sb = new Sortables(d);

您在所有TR的作爲排序列表通過。這意味着所有的td都是可排序的。

你需要傳遞：

var d = $('tbody'); 
var sb = new Sortables(d);

MooTools的文檔狀態：

參數： [1]列表 - （混合）需要，那份名單，這將成爲排序。

在這種情況下的列表是其子元素可以排序的任何元素（或元素數組）。

請看這裏：Updated Fiddle

來源

2015-03-17 23:33:09 Eclectic

使用Mootools對錶格行排序

回答

相關問題