2

OK、作成したいのは、テーブル セル (.slot div) に収まるドラッグ可能な要素です。これは、jQuery UI を使用したコードの簡略版です。

<style>

.draggable, .cell  {
    width: 100px; height: 100px;
}

.cell {
    background: #F00;
}

</style>

<script type="text/javascript">

$(function() {
        $( ".draggable" ).draggable({ 
            distance: 20, 
            containment: "#container", 
            snap: ".slot", 
            snapMode: "inner", 
            snapTolerance: 10, 
        });
    });

</script>

<table id=”container”&gt;
<tr>
    <td class=”cell”&gt; <div class=”slot”&gt; <div class=”draggable”&gt;</div> </div> </td>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
</tr>
<tr>
    <td class=”cell”&gt; <div class=”slot”&gt; <div class=”draggable”&gt;</div> </div> </td>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
</tr>
<tr>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
</tr>
</table>

今ではセル (.slot) の周りにそれらを移動できますが、次の 2 つのことを達成できません。

  1. ドラッグ可能要素を「.slot」にのみ合わせます (セル間でドラッグされた要素を破棄するオプションを削除します)。基本的に、ドラッグした要素をドロップすると、最も近いセルまたは最もカバーしているセルに移動します。
  2. 1 つのセル (.slot) に 2 つのドラッグ可能オブジェクトを配置することを制限します。

任意の提案やヘルプをいただければ幸いです!

前もって感謝します、ジョージ

4

1 に答える 1

2

Draggableの代わりにjQuery UI Sortableを使用してみてください。あなたの場合、 Sortable-Connected Listsを使用する必要があるかもしれません。

于 2012-05-19T15:43:20.743 に答える