Javascript HTML拖放功能是否有任何更新?
几个月前,我在我的网站上实现了一些东西,它使用拖放功能允许用户拖动手镯顶部的按钮。下面是一个大约一两个月前工作过的JSFIDLE: 在过去一两个月内,一些事情发生了变化,因为我的站点上的代码和这个JSFIDLE上的代码都没有以前的工作方式。拖动按钮时,按钮不再停留在框中 有人知道为什么会这样,或者有任何关于HTML或JS更新的信息可能会影响这一点吗?在谷歌上找不到任何东西 提前谢谢 来自JSFiddle:HTML的代码Javascript HTML拖放功能是否有任何更新?,javascript,html,css,drag-and-drop,Javascript,Html,Css,Drag And Drop,几个月前,我在我的网站上实现了一些东西,它使用拖放功能允许用户拖动手镯顶部的按钮。下面是一个大约一两个月前工作过的JSFIDLE: 在过去一两个月内,一些事情发生了变化,因为我的站点上的代码和这个JSFIDLE上的代码都没有以前的工作方式。拖动按钮时,按钮不再停留在框中 有人知道为什么会这样,或者有任何关于HTML或JS更新的信息可能会影响这一点吗?在谷歌上找不到任何东西 提前谢谢 来自JSFiddle:HTML的代码 <div id="bracelet"> <div id="
<div id="bracelet">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="div2" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div3" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div4" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag3" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div5" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag4" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div6" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag5" src="http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div7" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag6" src="http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div8" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag7" src="http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div9" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag8" src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div10" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag9" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div11" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag10" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div12" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag11" src="http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div13" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag12" src="http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" ondragend="dragEnd(event)" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
CSS
一个代码提示,ID必须是唯一的。您正在复制id=“div1”
。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var el = ev.target;
var parent = el.getAttribute("data-parent");
if(!parent){
el.setAttribute("data-parent", el.parentNode.id);
}
ev.dataTransfer.setData("Text", el.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function dragEnd(ev){
if(ev.dataTransfer.dropEffect == "none"){
var parent = document.getElementById(ev.target.getAttribute("data-parent"));
parent.appendChild(ev.target);
}
}
#div1 {
width:50px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
display: inline;
float: left;
margin-bottom: 25px;
margin-left: 50px
}
.drop {
width:50px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
display: inline;
float: left;
}
#bracelet {
width:420px;
height:75px;
padding: 10px;
margin-left: 30px;
border:1px solid #aaaaaa;
background-color: gray;
}