jQuery UI 为放置目标选择外部容器而不是内部容器答案

【问题标题】：jQuery UI select outer container and not inner container for drop targetjQuery UI 为放置目标选择外部容器而不是内部容器
【发布时间】：2014-03-28 03:27:59
【问题描述】：

我正在尝试使用 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');
    }
});

【问题讨论】：

我添加了一个 js fiddle：jsfiddle.net/KazeG/4

标签： jquery-ui jquery-selectors

【解决方案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;
}

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

演示地址：http://jsfiddle.net/KazeG/6/

【讨论】：