Question

我正在尝试使用jQuery UI仅为drop target选择外部容器。

我试图放入媒体内容，但不是媒体列表项。

原因是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');
    }
});

Answer 1

我不确定你能否达到你想要的效果而不添加其他元素作为你的＆＃34;垃圾＆＃34;可弃。有了一些整洁的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/

jQuery UI选择外部容器而不是内部容器用于放置目标

1 个答案: