如何在拖動時創建表格行的'ghost'圖像

我創建了一個基本的jQuery腳本來允許拖放表格行來重新排序它們。一切都很好 - 唯一無法弄清楚的是如何在拖動時創建該行的'鬼'圖像。如何在拖動時創建表格行的'ghost'圖像

我試圖克隆行

$(this).clone().addClass('dragClone');

用下面的CSS

.dragClone{opacity:0.4;position:absolute;z-index:1500;}

但沒有露面。搞清楚的是，TR可能需要一個表中存在，我克隆整個表，倒空行和所附所選TR如下：

$('.dragTable').clone().addClass('dragClone');$('.dragClone').find('tbody').empty().append($('.origZone'));

（origZone是被拖動的是給了給TR類）

還沒有顯示出來。

我從來沒有使用過克隆，所以我不知道我是否接近，或在正確的軌道上！我們的目標是創建一個類似於在Redips_drag插件使用的一個鬼形象（http://www.redips.net/javascript/drag-and-drop-table-row/）

來源

2012-11-09 Alan

你知道關於JQueryUI（http://jqueryui.com/）的權利嗎？它正是這樣做的（當使用可拖動功能時）並且還允許排序元素。除非你正在學習這樣做，否則可能比試圖重新發明輪子IMO更容易？ :) – Zappa

這樣做既可以學習，也可以節省內存。我的可拖動腳本只有2kb，而不是加載完整的JQueryUI庫！ – Alan

公平的，但你可以使用他們的網站生成一個自定義的UI文件，其中只包含你真正想要的任何組件:) – Zappa

我能夠通過執行以下操作來解決這個問題：

創建頁面上的空div：

if($('#dragContain').length<1){$('body').append('<div id="dragContain"style="width:96%;height:1px"></div>');}

保存含表給一個變量，將其克隆，除去TBODY內容和藏在THEAD，所附的行，將其保存爲一個變量，它附加到先前提到的div

$table=$(this).closest('.dragTable');$row=$(this).closest('tr').clone(); 

$table.find('tbody').remove();$table.find('thead').hide();$table.append($row);$('#dragContain').addClass('dragClone').append($table);

我不確定這是否是實現它的最佳方式，但它有效。

僅供參考 - 我不得不使用下面的CSS允許懸停影響工作的基礎行

#dragContain{pointer-events:none;}

希望這可以幫助別人！

來源

2012-11-09 07:33:23 Alan

如何在拖動時創建表格行的'ghost'圖像

回答

相關問題