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

Posted 2023-05-08

【中文标题】当 <li> 从容器 div 中取出时，有啥方法可以删除它？

【英文标题】：Is there any way to drop the <li> when it is taken out of the conatiner div?当 <li> 从容器 div 中取出时，有什么方法可以删除它？

【发布时间】：2011-11-18 04:26:55

【问题描述】：

我有一个要求，其中我有一个容器 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

【问题讨论】：

你能清理你的代码示例吗？很难阅读...哦，谢谢，@jfriend00。 :)

所以你想要额外的功能，说拖动时不要让鼠标退出框？

@Brogrammer - 我只是在想...想知道是不是因为他以无法回答的方式提出问题，或者他懒得选择答案

我清理了您的代码示例，但您需要返回并接受以前问题中有用的答案。否则没有人愿意花时间回答你的问题。

@Dan - 虽然这个问题，如果我理解的话，它是可以回答的......他提出的问题中至少有一半没有答案，而且很多没有真正回答他们是建议，因为问题并不能真正促进答案......

【参考方案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 );

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

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

【讨论】：

嘿，我想要 jquery dragsort 插件中的包含功能

@UmbrellaCorporation 好的，抱歉，一定是被引用链接弄糊涂了：jqueryui.com/demos/draggable/#constrain-movement