直接上例子:图片可以在在两个div中来回拖放
// CSS
<style type="text/css">
#div1, #div2
{float:left; 100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
// HTML
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
// JS
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));
}
解释
-
拖放元素需要id,必须设置
-
拖放元素添加draggable="true"属性,保证允许拖放
-
拖放元素添加拖动事件ondragstart,ev.dataTransfer.setData设置被拖放元素的数据类型和值(id)
-
拖放元素放置容器需要有两个事件
-
ondragover:允许别的元素放进来,因为默认是不允许的
-
drop:放置元素触发该事件
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- ev.dataTransfer.getData("Text")来获取该元素
- ev.target.appendChild(document.getElementById(data))被拖放元素追加到容器中
浏览器支持
- 这么好用的方法,IE9以下就别想了
碎碎念
- 愚昧的我以为别人的拖放都是用了很厉害很高大上的插件,原来是H5的方法。哭唧唧。。。。2021年才发现