8

現在の機能のように単にオーバーレイするのではなく、ドラッグ可能として設定された要素を取得し、その要素をコンテナに物理的に移動できる必要があります。

たとえば、次のようになります。

 <div class="container"></div>
 <div class="image">
    <img class="thumb" src="images/Koala.jpg" alt="" />
 </div>

 $(function () {
    $(".image").draggable();
    $(".container").droppable({
        drop: function (event, ui) {
            alert('dropped!');
        }
    });
 });

したがって、画像を「コンテナ」divにドラッグアンドドロップした後、実際のhtml要素をそこに移動する必要があります。

イベントが発生した後、Chrome の開発ツールを使用してソースを見ると、次のように表示されます。

 <div class="container">
    <div class="image">
        <img class="thumb" src="images/Koala.jpg" alt="" />
    </div>
 </div>

これは可能ですか？

ありがとう

4

2 に答える 2

7

これにより、ドラッグされた要素が dom ツリーのドロップ可能に移動するはずです。

drop: function (event, ui) {
    $(this).append(ui.draggable);
}
于 2012-07-30T16:57:08.147 に答える
3

ドロップ機能で$(this)は、ドラッグ可能を受け入れるドロップ可能であるため、ドラッグ.append()可能をドロップ可能に追加するために使用するだけです: http://jsfiddle.net/saluce/P6TjC/

$(function () {
    $(".image").draggable({helper: 'original'});
    $(".container").droppable({
        drop: function (event, ui) {
            $(this).append(ui.draggable.css({position: 'static'}));
            alert('dropped!');
        }
    });
 });​
于 2012-07-30T16:56:59.457 に答える