jQueryUI 在drop的时候，创建一个不同的元素

Question

我正在尝试做类似于我在此处找到的示例的操作：http://jsfiddle.net/mekwall/sY7Vr/2/

$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
    $(ui.item).text("Drop me!");
},
stop: function(event, ui) {
    $(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
    $(ui.item)
        .addClass("ui-state-highlight")
        .after(
            $("<div>")
                .addClass("drag")
                .html("New item!")
        );
}
});

就我而言，我有一个包含 'buttons' 和一个页面的操作栏。当我从操作栏（即 "Add text box"）拖动操作 'button' 并进行放置时，我想插入一个输入而不是按钮本身。

有什么好的方法吗？

感谢您的宝贵时间。

Answer 1

您只需替换html方法中的内容即可。下面的代码为 text 类型的 input 插入 html，然后删除拖动的项目。

Updated Fiddle

$(".sortable").sortable({
  items: ".drag",
  connectWith: ".sortable",
  start: function( event, ui ) {
    $(ui.item).text("Drop me!");
  },
  stop: function(event, ui) {
    $(ui.item).text("Drag me!");
  },
  receive: function( event, ui ) {
    $(ui.item)
      .addClass("ui-state-highlight")
      .after(
      $("<div>")
      .html("<input type='text' class='new-input'/>") //Add an input
    );
    //Remove the dragged item. You can use "hide" here as well
    $(ui.item).remove();
  }
});

jQueryUI 在drop的时候，创建一个不同的元素

jQueryUI At the time of drop, create a different element

jquery-ui

jquery-ui-draggable