2

要素を「ドロップ」できるダイアログを作成しようとしていますが、その下の要素もドロップ可能であるため、問題が発生しています。ネストされた要素 (おそらく z-index を持つもの) なしでドロップ可能な要素の貪欲な機能をシミュレートまたは強化する方法はありますか? または、ダイアログ内にダイアログをネストすることは可能ですか (これは、同じレベルでダイアログが重なっている場合に問題になる可能性があります)。

4

1 に答える 1

1

これを理解するのに多くの時間がかかりましたが、ここに実際のサンプルがあります: http://jsfiddle.net/MadLittleMods/HXRSe/

そのため、並べ替え可能なリストが重複していると問題が発生するため、組み込みのイベントを使用して回避策を作成する必要beforeStopがありました。衝突があった場合は、それを新しいリストに追加します。

この例の jQuery コードは次のとおりです。必ず jQuery 衝突を含めてください: http://sourceforge.net/projects/jquerycollision/

$('#container').sortable({
    connectWith: '.sortable_list',
    start: function() {
        $('#popup').fadeIn();
    },
    beforeStop: function(event, ui) {
        var list = ui.helper.collision($('#container').data().sortable.options.connectWith);
        var thisList = $(this);
        list.each(function(index, value) {
            if($(this)[0] != thisList[0]) {
                $(this).append(ui.helper);
            }
        });
    },
    stop: function() {
        $('#popup').fadeOut();
    }
}).disableSelection();

// List to Drag items into...
$('#popup').sortable({
    connectWith: '.sortable_list'
}).disableSelection();

そしてそれに付随する HTML/CSS:

<i>Start dragging to see a pop up list.</i>

<div id="container" class="sortable_list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<div id="popup" class="sortable_list">
    Drop Items Here:
</div>​

<style type="text/css">
#container
{
    background: #cccccc;
}

.item
{
    background: #eeeeee;
    border: 1px solid #aaaaaa;
    line-height: 30px;

    cursor: hand; 
    cursor: pointer;
}

#popup
{
    position: absolute;
    top: 40px;
    left: 75px;

    display: none;
    width: 500px;

    background: #444444;
    padding: 4px;
}

</style>
于 2012-10-05T05:40:23.540 に答える