Question

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

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

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

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

Answer 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/

Answer 2

根据你给出的答案，我设法找到了解决方案

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

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

Answer 3

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

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

每次占位符更改位置时，在排序期间触发更改事件。您搜索的事件是停止，停止之前或更新（与停止相同，但仅在与原始地点相比更改地点时）

$(this)不会给出已排序的项目，而是一些无法使用的jqueryui内容。您需要从参数中获取ui并将函数标题更改为function(event, ui){。

尚未弄清楚这一部分，但是尽管ui.item是您要删除的项目，但ui.item.remove（）不会删除此项目。 编辑：我发现如果你在deactivate事件中执行ui.remove（），一切都会被删除。

给出了1和2的解，3 i的解决方案还没有找到我自己。

成功完成JQuery Sortable操作后删除项目

3 个答案: