0

jQuery UIを使用して、ドロップターゲットの外部コンテナのみを選択しようとしています。

メディアコンテンツをドロップしようとしていますが、メディアリストアイテムをドロップしようとはしていません。

その理由は、media-list-itemsがその親の全幅ではなく、全高の異なる背景色である右側にのみドロップしたいためです。

HTML：

<div class="media-content clearfix ui-droppable on" style="">
    <form method="post" class="form-horizontal" action="./">
        <fieldset>
            <div class="media-list-items clearfix"> 
                <ul data-gallery_id="18" class="media-list ui-sortable" style="">
                    <li id="media_17"></li>
                    <li id="media_15"></li>
                </ul>
            </div>
        </fieldset>
    </form>
</div>

JS：

var $trash = $('.media-content:not(.media-list-items), .media-content');
    $trash.droppable({ 
    accept: '.media-list > li',  
    drop: function(event, ui) {
        console.log('trashed');
    }
});
4

1 に答える 1

1

「ゴミ箱」ドロップ可能として別の要素を追加しなくても、目的を達成できるかどうかはわかりません。いくつかのきちんとしたcssを使用すると、ほとんど同じように見せることができます:)

html

<div class="media-content">
    <form method="post" class="form-horizontal" action="./">
        <fieldset>
            <div class="trash"></div> <!-- added a trash element -->
            <div class="media-list-items">    
                <ul class="media-list">
                    <li id="media_25"></li>
                    <li id="media_26"></li>
                    <li id="media_27"></li>
                </ul>
            </div>
        </fieldset>
    </form>
</div>

css

.media-content {
    position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
    position: absolute;
    top: 0; bottom: 0; /* stretches to full height of .media-content */
    right: 0;
    width: 100px;
    background:#f5f5f5;
}

js

$('.media-content .trash').droppable({
    drop: function(event, ui) {
        console.log('trashed');
    }
});

デモ：http：//jsfiddle.net/KazeG/6/

于 2012-12-16T15:20:46.540 に答える