使用JavaScript拖放錶行嗎？

我正在使用HTML表格來顯示數據，並且我希望該用戶可以按照需要對錶格行進行排序和排序。表的HTML代碼...使用JavaScript拖放錶行嗎？

<table id='datagrid'> 
    <tbody> 
     <tr> 
     <td>1</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     </tr> 
    </tbody> 
</table>

我想，用戶可以拖動行和排序按需要......在Javascript 注：不想使用jQuery，Mootools的或任何其他回答JavaScript庫..因爲我想使用經典的Javascript（即核心）..

來源

2010-06-22 Harish Kurup

許多人將你指向一個框架的原因是，有很多瀏覽器差異的拖放和框架處理所有這些爲您。

但是，這些事件處理程序會給你一個公平的開始。

onDragStart - 當你開始將它拖動到某個位置時，它將觸發源元素。

onDrop - 當您將鼠標懸停在目標元素上時，釋放源元素時，將觸發目標元素。

來源

2010-06-22 07:10:09 Fenton

是onDragStart和onDrop支持所有主流瀏覽器的?? ?? – 2010-06-22 07:19:22

This website may help you on your issue。它包含一個簡短的教程和工作js代碼。

來源

2010-06-22 07:14:57 Thariama

嘿偉大的網站，謝謝你@Thariama – 2010-06-22 07:18:08

歡迎:) – Thariama 2010-06-22 07:19:53

表格行不能定位。無法更改頂部或左側的值。

而是拖動一個「代理」元素，如div。

當mousedown發生時，如果事件目標是或包含您想要拖動的東西（它是TR或具有您關心的TR祖先），請在那裏顯示代理並分配更新代理協調器的mousemove處理程序。

在mouseup事件中，隱藏代理（如上所述）並刪除mousemove回調。如果表中出現mouseup事件，則可以將源TR插入到新訂單中。

爲了使操作更加明顯，可以將來自源TR的信息（例如其中的文本）表示信息複製到代理。源TR可以變灰（通過設置不透明度或背景顏色）。

當用戶丟棄代理元素時，您可能還想提供一些符號插入的位置。

來源

2010-06-22 07:24:20 Garrett

我會嘗試，讓你知道@加勒特......似乎是有效的...... – 2010-06-22 07:33:01

使用JavaScript拖放錶行嗎？

回答

相關問題