成功的 JQuery 可排序操作后删除项目答案

【问题标题】：Remove item after successful JQuery Sortable action成功的 JQuery 可排序操作后删除项目
【发布时间】：2013-01-09 08:07:29
【问题描述】：

我正在尝试为我的 Java EE 应用程序创建一个工具栏。此工具栏包含图标，可以将其拖到 JQuery 可排序列表（JSP 页面上的 DIV 列）。我的最终目标是在释放鼠标按钮后显示一个 JSP 表单。在当前情况下，我的图表列将在成功拖动操作后包含一个图标，这是我不想要的。

我的问题：如何在释放鼠标按钮后立即删除项目，或者首先防止掉落？

我使用可拖动或可排序操作的原因是我想知道用户想要放置新小部件的位置（并保存此位置）。

希望有人可以帮助我/展示一个例子

【问题讨论】：

标签： jquery jakarta-ee mouseevent draggable jquery-ui-sortable

【解决方案1】：

好吧，我不知道您为什么要删除该项目，但阅读 jQuery API 文档会回答您的问题。你有没有尝试过？

可拖动

$("yourSelector").draggable({
     drop : function() {
            $(this).remove(); 
            // Removes this item from the DOM after a succesful drop
      }
});

文档：http://api.jqueryui.com/draggable/

可排序

$("yourSelector").sortable({
     change : function() {
            $(this).remove(); 
            // Removes this item from the DOM after a change in the sort order
      }
});

文档：http://api.jqueryui.com/sortable/

【讨论】：

感谢您的回复。我已经尝试过了，但它不起作用。该项目仍被添加到可排序列表中（我使用 draggable 进行拖动操作）。起作用的是将 droppable({ drop: function(event, ui) { ui.draggable.remove();} 添加到可排序列表中。但是，这意味着可排序列表中的项目也将在排序操作后被删除. 不是我想要的。还有其他选择吗？
有很多选择。但是，如果您可以提供一些您在项目中使用的代码 sn-ps，那将真的很有帮助。

【解决方案2】：

根据您给出的答案，我设法提出了解决方案

$(".sortableList").droppable({
  drop: function(event, ui) {
       if (!ui.draggable.hasClass("widget")) {
           ui.draggable.remove();
       }
 }
});

也许不是最好的解决方案，但它确实有效。谢谢你的帮助:)

【讨论】：

很高兴听到我的回答对您有所帮助。但对你的下一个问题的建议。使用项目中的一些代码 sn-ps，您将获得更准确的答案。

【解决方案3】：

l$("yourSelector").sortable({
    change : function() {
           $(this).remove(); 
           // Removes this item from the DOM after a change in the sort order
     }
});

@godesign ，这不起作用有几个原因。

每次占位符更改位置时，在排序期间都会触发更改事件。您搜索的事件是 stop、beforeStop 或 Update（与 stop 相同，但仅在与原始位置相比发生更改时）
$(this) 不会给出排序的项目，而是一些无法使用的 jqueryui 东西。您需要从参数中获取ui，并将函数标题更改为function(event, ui){。
还没有弄清楚这部分，但尽管 ui.item 是您要删除的项目，但 ui.item.remove() 不会删除该项目。 编辑： 我发现如果你在 deactivate 事件中执行 ui.remove()，所有内容都会被删除

1和2的解决方案已经给出，3的解决方案我还没有找到。

【讨论】：