成功执行JQuery可排序操作后删除项目

Question

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

我的问题是:如何在松开鼠标按键后立即删除项目，或者从一开始就防止项目下降？

我之所以使用可拖动或可排序的操作，是因为我想知道用户想要将新小部件放在哪里(并保存此位置)。

希望有人能帮我/举个例子

Answer 1

我不知道您为什么要删除这个项目，但是阅读jQuery应用程序接口文档将会回答您的问题。你试过什么吗？

可拖动的

$("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({ ：function() {$(YourSelector).remove()；//改变排序顺序后从DOM中删除此项})；

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

1. 在排序期间，每次占位符更改位置时，都会激发change事件。您搜索的事件是stop、beforeStop或Update (与stop相同，但仅当与jqueryui相比位置发生变化时)不会给出排序的项，而是一些不可用的jqueryui内容。您需要从参数中获取ui，并将函数标题更改为function(event, ui){.
2. haven't已计算出此部分，但是尽管ui.item是您要删除的项，但ui.item.remove()不会删除此项。EDIT:我发现如果在deactivate事件中执行ui.remove()，所有内容都会被删除，

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