通过拖拽实现添加和删除
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 通过拖放实现添加、删除 </title>
<style type="text/css">
div>div {
display: inline-block;
padding: 10px;
background-color: #777;
margin: 3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>将喜欢的小哥哥拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event);">江四晴</div>
<div draggable="true" ondragstart="dsHandler(event);">江老四</div>
<div draggable="true" ondragstart="dsHandler(event);">饭卡丘</div>
<div draggable="true" ondragstart="dsHandler(event);">江猪猪</div>
</div>
<div id="dest" style="width:400px;height:260px;
border:1px solid black;float:left;">
<h2 οndragleave="return false;">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1539358275&di=e69c33500898f1de97ba14e9b19fa296&src=http://img007.hc360.cn/g7/M08/FB/21/wKhQtFP72ACETPP3AAAAANWI-Go407.jpg" alt="垃圾桶" style="float:left;" />
<script type="text/javascript">
var dest = document.getElementById("dest");
// console.log(dest)
// 开始拖动事件的事件监听器
var dsHandler = function(evt) {
console.log('aaas')
// 将被拖动元素的innerHTML属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML);
}
// console.log(dsHandler)
dest.ondrop = function(evt) {
// console.log('aaaa')
evt.preventDefault();
var text = evt.dataTransfer.getData("text/plain");
// 如果该text以<item>开头
if(text.indexOf("<item>") == 0) {
// 创建一个新的div元素
var newEle = document.createElement("div");
// 以当前时间为该元素生成一个唯一的ID
newEle.id = new Date().getUTCMilliseconds();
// 该元素内容为“拖”过来的数据
newEle.innerHTML = text.substring(6);
// 设置该元素允许拖动
newEle.draggable = "true";
// 为该元素的开始拖动事件指定监听器
newEle.ondragstart = function(evt) {
// 将被拖动元素的id属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain", "<remove>" + newEle.id);
}
dest.appendChild(newEle);
// console.log('bbb')
}
}
// 当把被拖动元素“放”到垃圾桶上时激发该方法。
document.getElementById("gb").ondrop = function(evt) {
var id = evt.dataTransfer.getData("text/plain");
// 如果id以<remove>开头
if(id.indexOf("<remove>") == 0) {
// 根据“拖”过来的数据，获取被拖动的元素
var target = document.getElementById(id.substring(8));
// 删除被拖动的元素
dest.removeChild(target);
}
}
document.ondragover = function(evt) {
// 取消事件的默认行为
return false;
}
document.ondrop = function(evt) {
// 取消事件的默认行为
return false;
}
</script>
</body>
</html>
