当 <li> 从容器 div 中取出时，有什么方法可以删除它？

Question

我有一个要求，其中我有一个容器 div，其中包含 3 个 <ul>，在该容器 div 上附加了 Dragsort 结构就像

<div id="container">

    <ul id="list1">
        <li><div>a</div></li>
        <li><div>a</div></li>
        <li><div>a</div></li>
        <li><div>a</div></li>
    </ul>
    <ul id="list2">
        <li><div>b</div></li>
        <li><div>b</div></li>
        <li><div>b</div></li>
        <li><div>b</div></li>
    </ul>
    <ul id="list3">
        <li><div>c</div></li>
        <li><div>c</div></li>
        <li><div>c</div></li>
        <li><div>c</div></li>
    </ul>
</div>

要求：

这些项目在这些列表之间拖放。但不应将项目从容器 div 中取出（视觉上不是）当 somone 试图将项目拖出容器 div 时，有什么方法可以将鼠标从项目中分离出来

好像有

containment: "#containment-wrapper" in jquery  .draggable(

参考：http://jqueryui.com/demos/draggable/#constrain-movement

Answer 1

我想在 jquery dragsort 插件中包含包含功能

如果您指的是jQuery List DragSort，它被编码为将拖动的项目包含在一个容器中，但如果您不在列表之间拖动，则仅在UL 中。因此，要指定自定义容器，您需要修改代码。所以在代码中找到这个：

if (!opts.dragBetween) {
    var containerHeight = $(list.container).outerHeight() == 0 ? Math.max(1, Math.round(0.5 + list.getItems().size() * list.draggedItem.outerWidth() / $(list.container).outerWidth())) * list.draggedItem.outerHeight() : $(list.container).outerHeight();
    list.offsetLimit = $(list.container).offset();
    list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth();
    list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
}

并替换为：

if (!opts.dragBetween || typeof opts.containment != "undefined") {
    var box = typeof opts.containment != "undefined" ? $(opts.containment) : $(list.container);
    var containerHeight = box.outerHeight() == 0 ? Math.max(1, Math.round(0.5 + list.getItems().size() * list.draggedItem.outerWidth() / box.outerWidth())) * list.draggedItem.outerHeight() : box.outerHeight();
    list.offsetLimit = box.offset();
    list.offsetLimit.right = list.offsetLimit.left + box.outerWidth() - list.draggedItem.outerWidth();
    list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
}

接下来找到这个：

if (!opts.dragBetween) {
    top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
    left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
}

并替换为：

if (this.offsetLimit != null) {
    top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
    left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
}

现在像这样调用拖动排序：

$("#container ul").dragsort({ containment: "#container", dragBetween: true });

Answer 2

你在寻找这样的东西吗？：

HTML：

<div id="draggable_containment">
     <div id="draggable_content">Draggable content here</div>
</div>

脚本：

var draggable_content = $('#draggable_content');
var draggable_containment = $('#draggable_containment');

draggable_content.draggable({ containment: draggable_containment });

CSS：

#draggable_containment { widht: 300px; height: 300px; }

提示：

您可以使用 javascript 动态设置容器的宽度和高度。如果容器的子元素是绝对定位的，则可能导致容器没有按应有的方式“拉伸”。这就是为什么我们需要设置宽度和高度。

希望这对您有所帮助，如果我的英语有点生疏，请见谅。