Question

我正在使用JQuery UI在javascript中创建一个简单的汇编语言编辑器。我希望能够从指令集拖动指令并将它们放入可排序的程序中。

但是我需要将指令集显示为单词列表（操作码），然后在删除时将它们更改以便具有可编辑的参数（操作数）。

我尝试在可拖动指令集中使用自定义帮助程序，但尽管指令在拖动后立即更改，但在删除后它将恢复为旧形式。现在我正在尝试在可排序的事件中使用drop事件，例如“update”，以便更新被删除指令的DOM，但是当指令是新的而不仅仅是重新排序时，我找不到只能这样做的方法。

简而言之，我需要知道如何在可排序的项目中更改新丢弃项目的DOM。

Answer 1

您是否尝试过使用receive事件？

$('#list1').sortable({
  connectWith:'#list2',
  receive: function(e, ui){
    ui.item.addClass('new');
  }
});

我创建了this fiddle来展示如何将类添加到正在接收的元素中。

如果您将元素从#list2拖到#list1，则会获得新的类/蓝色背景。但是，如果您只是重新排序现有项目，它什么都不做。重新排序新项目也将无效，即。它将保持类/蓝色背景颜色。我选择添加一个类，因为它更容易作为一个例子，但你可以做任何你需要的事情，比如在收到项目后创建一个输入字段来输入操作数。

这有帮助吗？

编辑：如果您需要将原始元素保留在列表中，请尝试this

$('#list2').sortable({
  connectWith:'#list1',
  remove: function(e, ui){
    ui.item.clone().appendTo('#list1').addClass('new');
    $(this).sortable('cancel');
  }
});

它在列表的末尾添加了项目（追加），但我确信通过一些研究，你可以弄清楚如何正确放置它。

如何在可排序的JQuery UI中更改新删除的项目，或者如何知道删除的项目何时是新的？

1 个答案: