5

jQuery UI のドロップ可能な要素があり、ドラッグ可能な要素がその上に置かれたときに大きくしたいと考えています。hoverClass オプションの使用と、drophover イベントへのバインドの両方を試しました。

視覚的には、これらの方法はどちらも正常に機能します。ただし、ドラッグ可能オブジェクトがドロップ可能オブジェクトの元の (小さい) 境界を出ると、現在の (大きい) 境界内にあるにもかかわらず、jQuery UI はこれを「ドロップアウト」と解釈します。

たとえば、js:

$("#dropable").droppable({
    hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});

CSS:

#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }

この場合、ドラッグ可能オブジェクトがドロップ可能オブジェクトの上に移動すると、ドロップ可能オブジェクトのサイズが視覚的に 200px に増加します。この時点で、ドラッグ可能オブジェクトが 20 ピクセル下に移動した場合、ドロップ可能オブジェクトの上にまだホバリングしていると予想されます。代わりに、jQuery UI がドロップアウト イベントを発生させ、ドロップ可能オブジェクトの高さが 10 ピクセルに戻ります。

私が期待するように動作させる方法を知っている人はいますか?

jsFiddle の例: http://jsfiddle.net/kWFb9/

4

4 に答える 4

5

同じ問題がありましたが、次のオプションを使用して解決できました。

$("#droppable").droppable({
    hoverClass: 'hovering',
    tolerance: 'pointer'
});

$('#draggable').draggable({
    refreshPositions: true
});

これが実際のフィドルです：http://jsfiddle.net/kWFb9/51/

http://bugs.jqueryui.com/ticket/2970を参照してください。

于 2014-07-02T15:28:45.157 に答える
2

だから私はあなたのフィドルにいくつかの微調整をしました

最初に、ドロップ可能な許容範囲を「タッチ」に設定します。これは、ドラッグ可能な部分が触れるたびにアクティブになります。これにより、ホバリング クラスが適用されます。

次に、ドラッグ可能な要素のサイズをわずかに変更するアニメーションを追加しました。これがあなたが望む機能かどうかわからなかったので、とにかくそこに入れました。

最後に、ドラッグ可能な要素がドロップ可能な領域にドロップされたときに、ホバリング クラスをドロップ可能な要素に永続的に適用します。このようにして、要素が含まれている場合、ドロップ可能要素はその狭い高さに戻りません

http://jsfiddle.net/kWFb9/2/

編集：

より良いフィドル: http://jsfiddle.net/kWFb9/6/

これが役立つことを願っています:)

于 2011-11-27T02:51:22.417 に答える
1

div背景なしでより大きな（つまり、＃droppable.hoveringのサイズ）を作成し、それにドロップ可能を適用することができます。HTMLを提供しなかったが、新しい#drop_containerには両方のdivが含まれている必要があることに注意してください。

JS

var dropped;
$("#droppable").droppable({
    drop: function(event, ui) {
        dropped = true;
    }
});

$('#draggable').draggable({
    start: function(event, ui) {
        $("#droppable").addClass("hovering");
        dropped = false;
    },
    stop: function(event, ui) {
        if (!dropped) {
            $("#droppable").removeClass("hovering");
        }
    }
});

CSS

#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }

.live()または、この記事を使用して、またはこの記事.livequery()から別の解決策を試すことができます

[編集]コードを編集しました。これがjsfiddleです：http：//jsfiddle.net/94Qyc/1/

グローバル変数を使用する必要がありましたが、ボックスが削除されたかどうかを確認するためのより良い方法が見つかりませんでした。誰かがアイデアを持っているなら、それは素晴らしいことです。

于 2011-10-24T13:13:02.697 に答える
0

別の（ハムハム）悪くない解決策があります：

TL;DR :フィドル

問題は、プラグインがウィジェットの作成時に dom 要素のサイズ値を格納することです (次のようなもの):

//jquery.ui.dropable.js
$.widget("ui.droppable", {
   ...
    _create: function() {

    var proportions,
       this.proportions = function() { return proportions; }

また、ウィジェットのオフセットは $.ui.ddmanager.prepareOffsets(); で初期化されます。したがって、プロポーション オブジェクトを上書きするだけで済みます。

このようにして、実際のプラグイン プロパティにアクセスできるようになるため、次のように記述できます。

$("#droppable").droppable({
    hoverClass: 'hovering',
    over: function(ev, ui) {
        var $widget = $(this).data('droppable');
        $widget.proportions = {
            width: $(this).width(),
            height: $(this).height()
        };    
    },
    out: function(ev, ui) {
        var $widget = $(this).data('droppable'); //ui-droppable for latests versions
        $widget.proportions = {
            width: $(this).width(),
            height: $(this).height()
        };
    }
})
于 2014-08-28T11:06:00.857 に答える