7

一部の部分が重複する可能性のある複数の jquery ドロップ可能オブジェクトを隣り合わせに作成しようとしています。これらの場合、一番上にあるもの (z インデックスに関して) を貪欲にする必要があります。

ドロップ可能でオプションを設定しようとしgreedy: trueましたが、これは役に立たないようです。return falseまた、ドロップイベントで試して使用しevent.stopPropagation();ました。

これは、 jquery のデモ ページに基づくjsfiddleです。

それをトリガーする別のドロップ可能なもの、できれば最高のz-indexを持つものがある場合、ドロップイベントの伝播を停止する方法はありますか?

4

5 に答える 5

7

document.elementFromPointカーソル直下の要素を確認するために使用します。ドロップ可能でない場合は、何もしないでください。drop:ハンドラの先頭に次を追加します。

var droppable = $(this);
ui.helper.css({pointerEvents: 'none'});
var onto = document.elementFromPoint(event.clientX, event.clientY);
ui.helper.css({pointerEvents: ''});
if(!droppable.is(onto) && droppable.has(onto).length === 0) {
    return;
}

ヘルパーのポインター イベントを無効document.elementFromPointにすることは、ドラッグを無視してその下のみをチェックするために必要です。簡単なデモ用に jsFiddle を更新しました。ハイライトは引き続き両方の要素に影響することに注意してください。jQuery UI に強調表示を行わせるのではなく、ドラッグ可能drag:イベントに自分で書き込むことで、これを変更できるはずです。ただし、このチェック (およびポインター イベントの無効化) は非常に遅く、ちらつきを引き起こす可能性があるため、実際には使用できないことがわかりました。

于 2013-02-06T12:01:48.410 に答える
2

要素が最も表示されやすい要素であるかどうかを確認する関数が必要です。何かが最もよく見えるとき

  1. アイテムは後でdomリストにあります
  2. より高いz-indexセットがあります

以下の関数を使用して、現在の要素（droppable設定のoverメソッドまたはdropメソッドのいずれか）が実際に最も高い表示要素であるかどうかを確認できます。

function isHighestVisible(cEl) {
    cEl = $(this); //use this if you want to use it in the over method for draggable, else just pass it to the method

    //get all active droppable elements, based on the classes you provided
    var $list = $('.ui-widget-header.ui-state-active');
    var listCount = $list.length;
    var HighestEl = null;
    var HighestZI = -1;


    //one element is always highest.
    if (listCount<=1) {
        console.log(cEl.attr('id'));
        return true;
    }

    //check each element
    $list.each(function(i) {
        var $el = $(this);

        var id = $el.attr('id');

        //try to parse the z-index. If its 'auto', return 0.

        var zi = isNaN(parseInt($el.css('z-index'))) ? 0 : parseInt($el.css('z-index'));

        if (zi>0) {
            //z-index is set, use it.
            //I add the listCount to prevent errors when a low z-index is used (eg z-index=1) and there are multiple elements.
            //Adding the listCount assures that elements with a z-index are always later in the list then elements without it.
            zi = zi + listCount;
        } else {
            //z-index is not set, check for z-index on parents
            $el.parents().each(function() {
                $par = $(this);
                var ziParent = isNaN(parseInt($par.css('z-index'))) ? 0 : parseInt($par.css('z-index'));
                if (ziParent>0) {
                    zi = ziParent;
                    return false;
                }
            });
        }

        //add the current index of the element to the zi
        zi += i;

        //if the calculated z-index is highest, change the highest element.
        if (HighestEl==null || HighestZI<zi) {
            HighestEl=$el;
            HighestZI = zi;
        }
    });

    //if the highest found active element, return true;
    if (HighestEl.attr('id')==cEl.attr('id')) {
        console.log(cEl.attr('id'));
        return true;
    }

    //if all else fails, return false
    return false;
}
于 2012-11-27T15:59:22.743 に答える
0

貪欲なオプションは、ドロップ可能な親を持つネストされた要素専用です。

あなたのコードでは、2つのドロップ可能な要素は兄弟であるため、貪欲なオプションは機能しません。

<div id="droppable3" class="ui-widget-header">
    <p>Outer droppable</p>
</div>
<div id="droppable3-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
</div>

親と子の代わりに兄弟を使用したい場合は、これが厄介な回避策です。

ライブコードの例。

function normalDraggedOver() {
    $( this ).addClass( "ui-state-highlight" )
             .find( "> p" )
             .html( "Droppeeeed!" );
}

var options = {
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    greedy: true,
    drop: normalDraggedOver
};

var options2 = {
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    disabledClass: "ui-state-disabled",
    hoverStateClass: "ui-state-hover",
    greedy: true,
    greedyWithSibligs: true,
    drop: normalDraggedOver,
    over: function () {
    /* if we have previous siblings of the inner element we handle them as parents */
        if(options2.greedyWithSibligs && $(this).prev().length > 0) {       
            $(this).siblings().slice(0, $(this).index())
            .removeClass(options2.hoverClass)
            .droppable('disable')
            .removeClass(options2.disabledClass)
            .removeClass(options2.hoverStateClass);
        }
    },
    out: function () {
    /* all the siblings of the inner element that were handled as parents act as one*/
        if(options2.greedyWithSibligs && $(this).prev().length > 0) {
            $(this).siblings().slice(0, $(this).index())
            .droppable('enable')
            .addClass(options2.hoverClass);
            console.log($(this).attr('id'));
        }
    }
};
于 2012-11-26T23:52:59.537 に答える
0

同じように見せたい場合は、＃droppable3をposition：relativeに設定し、子＃droppable3-innerをposition：absoluteに設定します。

HTML：

<div id="droppable3" class="ui-widget-header">
    <p>Outer droppable</p>
</div>
<div id="droppable3-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
</div>

これがライブの例です

于 2012-11-27T06:23:15.333 に答える
0

この問題が発生した場合、jQuery の .addclass を使用します

.droppablewidgetforce {
z-index: 1000 !important; 
}

そのようなクラスを作成して、何があってもレイヤーが一番上にとどまるようにします..これで問題が解決するはずです。

于 2012-10-04T09:41:30.753 に答える