javascript - 拖放排序元素后创建重复项

Question

我正在通过排序创建简单的拖放，但我遇到了一个问题，那就是在拖放元素之后，当我对它们进行排序时，会发生元素的重复，第二个问题是 contenteditable 它不起作用当我右键单击时，它会正常工作，但是当我左键单击时，它有时会工作。我究竟做错了什么。我该如何解决。

Answer 1

你只需要添加 accept: '#textTemplate', 到 droppable 让 #editorDesignView accept drop just from #文本模板

$(function(){

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


});

演示

$(function(){
  
  $("#textTemplate").draggable({
    helper: "clone"
  });
  $( "#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;">Add your text here.</p></div>';
  $(html).not('#editorDesignView div').appendTo(this).hide().slideDown();
  var currentHtml = $("#editor").val();       
  $("#editor").val(currentHtml+html);
      }
    });
  $('#editorDesignView').sortable();
  

});

* {box-sizing: border-box;}
#wrapper {width: 100%; height: 610px;}
#templateWrapper {width: 30%; height: 100%;float:left;overflow-y: scroll;}
#editorBlock {width: 70%; height: 100%;float:left;position: relative;background-color:#f1f1f1}
#editor{display:none;}

#editorDesignView {width: 100%; height: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="wrapper">
  <div id="templateWrapper">
    <div id="textTemplate" class="template">
        <div>Text</div>
    </div>
  </div>
  <div id="editorBlock">
    <div id="editorDesignView"></div>
  </div>
</div>