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

Question

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

基本思想是一个带有draggable标签的元素只能拖到一个dropable元素上。

<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

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

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