拖n個墨滴排序元素後創建duplicasy

Question

我創建了簡單的拖放n，其中排序下降，但我有一個問題，就是拖放元素時，我對它們進行排序後的元素duplicasy發生和第二問題是contenteditable它不能正常工作時，我右鍵單擊然後它的作品，但當我離開點擊它有時工作。我究竟做錯了什麼。我該如何解決它。

Answer 1

你只需要添加accept: '#textTemplate',到droppable讓#editorDesignView剛剛從#textTemplate

$(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({ 
 
    \t 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>