jQuery ui 单行可拖动表格

Posted 2023-05-08

【中文标题】jQuery ui 单行可拖动表格

【英文标题】：jQuery ui draggable table by single row

【发布时间】：2012-04-21 00:32:48

【问题描述】：

我有一个可以正常工作的可拖动表格，但我希望能够从表格内的<th> 行中拖动它，而不是从所有<td> 行中拖动它。

<table id="draggable">
<tr>
<th id="drag">header (can drag table from here)</th>
</tr>
<tr>
<td>normal column (can't drag the table from here)</td>
</tr>
</table>
<script type="text/javascript">
    $( "#draggable" ).draggable( opacity: 0.5 );
</script>

我该如何处理这个？

【参考方案1】：

你好工作演示在这里：http://jsfiddle.net/rAzL8/ & http://jsfiddle.net/rAzL8/1/

Cooleos，所以你只需要在你的桌子上使用th 标记上的:handle 属性和可拖动和宾果游戏，它只会处理你的桌子的th 标记。希望这会有所帮助，干杯

Jquery 代码

    $( "#draggable" ).draggable( opacity: 0.7, handle:'#drag' );

 ​

HTML

<table id="draggable">
<tr>
<th id="drag">header (can drag table from here)</th>
</tr>
<tr>
    <td>normal column (can't drag the table from here) ;)</td> <td>another</td>
</tr>

    <tr>
<td>normal column (can't drag the table from here) ;) </td>
</tr>

    <tr>
<td>normal column (can't drag the table from here);) </td>
</tr>
</table>​

【讨论】：

一个小问题，如何设置最大可拖动距离，不能拖到页面外？

嗨，当然：你的意思是：jqueryui.com/demos/draggable/#option-distance，祝你好运！