我试图拖放一些项目。我可以将div拖到drop zone div,它工作正常。但是,当我拖动另一个div时,我实际上可以将它放在先前丢弃的div中。我不想要这个。我希望drop zone成为唯一可以接受删除div的地方。
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12' style='padding:0px;'>
<div class='col-sm-6'>
<div class='row'>
<div class='col-sm-2 drag-example' id='drag-1'
draggable='true' ondragstart='drag(event)'></div>
<div class='col-sm-2 drag-example' id='drag-2'
draggable='true' ondragstart='drag(event)'></div>
<div class='col-sm-2 drag-example' id='drag-3'
draggable='true' ondragstart='drag(event)'></div>
</div>
</div>
<div class='col-sm-6'>
<div class='row'>
<div class='col-sm-10 drop-example'
ondrop='drop(event)' ondragover='allowDrop(event)'
id='drop-div'></div>
</div>
</div>
</div>
</div>
</div>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData('text', ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
this
引用作为第二个参数传递function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
// change 1 :: added el
function drop(ev, el) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
// change 2 :: append to el
el.appendChild(document.getElementById(data).cloneNode(true));
}
.drag-example {
border: 1px Solid Black;
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.drop-example {
border: 1px Solid Red;
width: 50px;
height: 50px;
}
<div class='drag-example' id='drag-1' draggable='true' ondragstart='drag(event)'></div>
<!-- change 3 :: pass this to drop -->
<div class='drop-example' ondrop='drop(event, this)' ondragover='allowDrop(event)' id='drop-div'></div>