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

我不确定您是否可以在不添加其他元素作为“垃圾”droppable 的情况下实现您想要的。使用一些整洁的 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 回答