0

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

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

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

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

4

3 回答 3

2

好吧，我不知道您为什么要删除该项目，但阅读 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/

于 2013-01-09T12:22:49.147 回答
0

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

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

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

于 2013-01-09T13:09:29.343 回答
0 
l$("yourSelector").sortable({
    change : function() {
           $(this).remove(); 
           // Removes this item from the DOM after a change in the sort order
     }
});

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

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

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

于 2016-05-12T01:59:06.623 回答