javascript - 如何使可拖动元素可放置而不是附加？

Question

我有一个简单的拖放操作，它工作正常，正如我预期的那样但是，

问题:

唯一的问题是元素正在追加

我想要的:

我不想在拖放元素时追加我只想要的元素它们看起来像往常一样。

我的代码:

$( "#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();
  }
    });

Here is my fiddle.

更新:

我不想删除或想要与左侧相同的元素。我只是希望当我放下元素时我可以将它放在任何地方

更新的 fiddle :

Fiddle .请检查控制台以获取结果。我希望结果打印在 droppable are 上而不附加它。

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();
  }
    });


});

这是我的 fiddle