html5设置垃圾箱,html5中的拖拽到垃圾箱

Document

//css样式

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;}

//HTML片段

垃
圾
箱

列表1

列表2

列表3

列表4

列表5

列表6

function $(el){

return document.querySelectorAll(el)

}

var drag = $(".draglist");//被拖拽的元素

var dustbin = $(".dustbin")[0]//垃圾箱

var dragEle = null;

for(var i=0;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 = ""+$('#'+dragEle)[0].innerHTML+"被删除了！"

$(".dragbox")[0].removeChild($("#"+dragEle)[0])

}