Question

是否可以将可拖动的TD限制为仅具有特定类别的元素。

基本思想是用draggable标记的元素只能拖动到可丢弃的元素。

<table>
   <tbody>
       <tr>
           <td>Header 1</td> <!-- can't drag here -->
           <td>Header 1</td> <!-- can't drag here -->
           <td>Header 1</td> <!-- can't drag here -->
           <td class="draggable">draggable TD</td> <-- draggable td -->
           <td class="droppable">droppable area</td> <-- draggable area -->
           <td class="droppable">droppable area</td> <-- draggable area -->
           <td class="droppable">droppable area</td> <-- draggable area -->
           <td class="droppable">droppable area</td> <-- draggable area -->
       </tr>
   </tbody>
</table>

我已经阅读过Jquery UI文档但是看起来真正限制可拖动的唯一方法是父容器或包装的DIV，但在表格中这是不可能的。

  <table>
       <tbody>
           <tr>
               <td>Header 1</td> <!-- can't drag here -->
               <td>Header 1</td> <!-- can't drag here -->
               <td>Header 1</td> <!-- can't drag here -->
               <div class="container"> <-- INVALID HTML -->
                   <td class="draggable">draggable TD</td> <-- draggable td -->
                   <td class="droppable">droppable area</td> <-- draggable area -->
                   <td class="droppable">droppable area</td> <-- draggable area -->
                   <td class="droppable">droppable area</td> <-- draggable area -->
                   <td class="droppable">droppable area</td> <-- draggable area -->
                </div>
           </tr>
       </tbody>
   </table>

更新：JSFiddle显示问题http://jsfiddle.net/d7wsz/67

Answer 1

您可以指定哪些表列将作为droppable（使用类）

$( "td.droppable" ).droppable();

Answer 2

在没有使用无效HTML的情况下，我找不到使用常规表的解决方案。最后，我选择了满足要求的基于DIV的表格，并允许我将每组“TD”包裹在收容DIV中。

JQuery UI - 限制可拖动到标记为特定类的元素

2 个答案: