有什么办法可以去掉吗？什么时候从conatiner div中取出？

Question

我有一个要求，其中我有一个容器 div，其中包含 3 个

，其上附加了 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中取出（视觉上不是）当有人试图将项目拖出容器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));
}

现在像这样调用dragsort：

$("#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 动态设置容器的宽度和高度。如果容器的子元素是绝对定位的，则可能会导致容器无法按其应有的方式“拉伸”。这就是为什么我们需要设置宽度和高度。

希望这对你有帮助，如果我的英语有点生疏，抱歉。