如何使可拖動元素可拖放而不是附加？

Question

我有一個簡單的拖放操作，它按預期工作正常，但是，

問題：

唯一的問題是元素要追加

我想要的是：

我不想添加元素，我只是希望當我拖放n元素時，它們通常會出現。

我的代碼：

$( "#editorDesignView" ).droppable({
        accept: '.textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">'+ui.draggable.text()+'.</p></div>';        
  $(html).appendTo(this).hide().slideDown();
  }
    });

這是我的小提琴。

更新：

我不想刪除或想要與左側相同的元素。 我只是希望當我放下元素時可以將其放到任何地方

更新內容：

小提琴 。 請檢查控制台以獲取結果。 我希望將結果打印在droppable上而不附加它。

Answer 1

您想要在右列上使用與左側相同的表示形式。 您可以在右列的任意位置插入。

$(function(){

  $(".textTemplate").draggable({
    helper: "clone",
    zIndex: 2500,
  });
  $( "#editorDesignView" ).droppable({
        accept: '.textTemplate',
      drop: function( event, ui ) {
        console.log(ui.draggable.text(), event, ui);
        var html = '<div>'+ui.draggable.text()+'</div>';        
  $(html).appendTo(this).hide().slideDown();
  }
    });


});

這是我的小提琴