我正在通过排序创建简单的拖放,但我遇到了一个问题,那就是在拖放元素之后,当我对它们进行排序时,会发生元素的重复,第二个问题是 contenteditable 它不起作用当我右键单击时,它会正常工作,但是当我左键单击时,它有时会工作。我究竟做错了什么。我该如何解决。
最佳答案
你只需要添加 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>
关于javascript - 拖放排序元素后创建重复项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43953751/