10

jQuery UIを使用して、ドラッグ可能なオブジェクトの包含領域を制限する必要がありますが、いくつかの追加の制限があります。ドラッグ可能な要素が同じコンテナ内の他の要素と重ならないようにする必要があります。「moveInHere」領域での移動を許可する必要がありますが、「butNotHere」領域では許可しません。出来ますか？

<div id="moveInHere">

    <div id="dragMe"> </div>

    <div id="butNotHere"> </div>

</div>


<script type="text/javascript">

    $("#dragMe").draggable({
        containment: "#moveInHere"
    });

</script>
4

2 に答える 2

19

編集：新しいソリューション

JQuery UIDraggableCollisionと呼ばれるこのプラグインを見つけました。これを使用すると、必要な機能を実装するのは簡単になります。次のjsFiddleの例を参照してください。http：//jsfiddle.net/q3x8w03y/1/ （これは、バージョン1.0.2のJQuery UI Draggable Collisionと、JQuery1.7.2およびJQueryUI1.1.18を使用します。）

コードは次のとおりです。

$("#dragMe").draggable({
    obstacle: "#butNotHere",
    preventCollision: true,
    containment: "#moveInHere"
});

</ p>

古いソリューション

以下が機能するはずです。ただし、グリッチがあります。divが衝突したら、ドラッグしているdivを「再取得」する必要があります。これは少し面倒な場合があります。おそらく他の誰かがこれを修正する方法を知っているでしょう。ここで私のjsFiddleの例を見ることができます：http ：//jsfiddle.net/MrAdE/8/

var prevOffset, curOffset;
$("#dragMe").draggable({
    drag: function(e,ui) {
        prevOffset= curOffset;
        curOffset= $.extend({},ui.offset);
        return true;
    }
});

$("#butNotHere").droppable({
    greedy: true,
    over: function(e,ui) {
        ui.helper.offset(curOffset= prevOffset).trigger("mouseup");
    },
    tolerance: "touch"
});​
于 2012-07-12T14:01:49.837 に答える
7

これにはかなりの手間がかかりました。基本的にdroppable、避けたい要素にを作成し、ドラッグがその上にあるときにブール値を設定します。次に、それを文書化されていない復帰関数のオーバーライドで使用して、ドロップをキャンセルします。#dragMe完全に終わった場合にのみ機能し#butNotHereます：

$(document).ready(function(){
    var shouldCancel = false;
    $('#dragMe').draggable({
        containment: '#moveInHere',
        revert: function(){
            if (shouldCancel) {
                shouldCancel = false;
                return true;
            } else {
                return false;
            }
        }
    });
    $('#butNotHere').droppable({
        over: function(){
            shouldCancel = true;
        },
        out: function(){
            shouldCancel = false;
        }
    });
});

動作するデモをチェックして、気軽に試してみてください：http: //jsfiddle.net/H59Nb/31/

于 2012-07-12T13:48:44.210 に答える