<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
//css样式
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray;
font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
//HTML片段
<div class="dustbin"><br />垃<br />圾<br />箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true" id="list1">列表1</div>
<div class="draglist" title="拖拽我" draggable="true" id="list2">列表2</div>
<div class="draglist" title="拖拽我" draggable="true" id="list3">列表3</div>
<div class="draglist" title="拖拽我" draggable="true" id="list4">列表4</div>
<div class="draglist" title="拖拽我" draggable="true" id="list5">列表5</div>
<div class="draglist" title="拖拽我" draggable="true" id="list6">列表6</div>
</div>
<div class="dragremind"></div>
<script>
function $(el){
return document.querySelectorAll(el)
}
var drag = $(".draglist");//被拖拽的元素
var dustbin = $(".dustbin")[0]//垃圾箱
var dragEle = null;
for(var i=0;i<drag.length;i++){
drag[i].ondragstart = function(e){
e.dataTransfer.effectAllowed = 'move'; //用来指定当元素被拖放式所允许的视觉效果
e.dataTransfer.setData("text",e.target.id)
}
}
dustbin.ondragover = function(ev) {
/*拖拽元素在目标元素头上移动的时候
ondragover 事件规定在何处可以放置被拖动的元素。
（默认地，无法将数据/ 元素放置到其他元素中。如果需要设置允许放置，则必须阻止对元素的默认事件，
即：若想触发ondrop事件，ondragover 中必须阻止默认事件。）
所以allowDrop(e)函数里通过e.preventDefault()阻止了默认行为。
*/
ev.preventDefault();
return true;
};
dustbin.ondrop = function(e){
e.preventDefault();
dragEle = e.dataTransfer.getData("text")
$(".dragremind")[0].innerHTML = "<strong>"+$('#'+dragEle)[0].innerHTML+"被删除了！</strong>"
$(".dragbox")[0].removeChild($("#"+dragEle)[0])
}
</script>
</body>
</html>
html5中的拖拽到垃圾箱
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 【蝴蝶效应】 蝴蝶效应:上个世纪70年代，美国一个名叫洛伦兹的气象学家在解释空气系统理论时说，亚马逊雨林一只蝴蝶...
