5

この例に従ってください。

<div id="containers">
    <div class="frame">
        <div class="popup">Popup</div>
        <div class="object">Object 1</div>
        <div class="object">Object 2</div>            
    </div>
</div>

各オブジェクトをポップアップにドラッグできるようにしたい。ポップアップ内に入ると、フレームに対して再びドラッグ可能になる可能性があります

問題は2回目です。ドラッグ可能なオブジェクトをドロップ可能なポップアップにしようとしても、何も起こりません..

何か案は？

ここに私のコード。 http://jsfiddle.net/PtLLf/49/

4

1 に答える 1

5

その理由は、デフォルトでは、要素がネストされたドロップ可能オブジェクトにドロップされると、各ドロップ可能オブジェクトがその要素を受け取るためです。

したがって、あなたの場合、内側のドロップが発生しますが、外側の div も発生し、要素自体を取得します。

オプションを true に設定greedyすると、親のドロップ可能オブジェクトは要素を受け取りません。ドロップ イベントは引き続き正常にバブリングしますが、event.target をチェックして、どのドロップ可能要素がドラッグ可能な要素を受け取ったかを確認できます。

参照: http://api.jqueryui.com/droppable/#option-greedy

コード：

$('#containers .frame .popup').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.object',
     greedy: true ,
    drop: function (event, ui) {
        $(ui.draggable).addClass("insidePopup");
        ui.draggable.detach().appendTo($(this));
    }
});

$('#containers .frame').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.insidePopup',
    greedy: true ,
    drop: function (event, ui) {
        ui.draggable.detach().appendTo($(this));
        $(ui.draggable).removeClass("insidePopup");
    }
});

$('#containers .frame .object').draggable({
    helper: 'clone',
    containment: "document"
});

デモ: http://jsfiddle.net/IrvinDominin/dVFgn/

于 2013-09-20T11:40:18.763 に答える