addEvent(dragItems[i],'dragstart',function(event){
event.dataTransfer.setData('obj_id',this.id);
returnfalse;
});
}
}
//dragovereventhandler
addEvent(dropAreas,'dragover',function(event){
if(event.preventDefault)event.preventDefault();
//littlecustomization
this.style.borderColor="#000";
returnfalse;
});
//dragleaveeventhandler
addEvent(dropAreas,'dragleave',function(event){
if(event.preventDefault)event.preventDefault();
//littlecustomization
this.style.borderColor="#ccc";
returnfalse;
});
//dragentereventhandler
addEvent(dropAreas,'dragenter',cancel);
//dropeventhandler
addEvent(dropAreas,'drop',function(event){
if(event.preventDefault)event.preventDefault();
//getdroppedobject
variObj=event.dataTransfer.getData('obj_id');
varoldObj=document.getElementById(iObj);
//getitsimagesrc
varoldSrc=oldObj.childNodes[0].src;
oldObj.className+='hidden';
varoldThis=this;
setTimeout(function(){
oldObj.parentNode.removeChild(oldObj);//removeobjectfromDOM
//addsimilarobjectinanotherplace
oldThis.innerHTML+='';
//andupdateeventhandlers
updateDataTransfer();
//littlecustomization
oldThis.style.borderColor="#ccc";
},500);
returnfalse;
});
可以看到以上代码并不复杂。
开始我们选择所有的可拖放的元素。
然后将'dragstart'事件绑定到所有的draggable元素上,这样讲数据设定到dataTransfer对象中。
对于所有的droppable区域我们绑定这些事件:
'dragover','dragleave'和'drop'。
针对前两个方法我们执行一个小的CSS自定义来激活drop区域。
当我们放置可拖放的元素的时候,我们的脚本会复制可拖放元素并且将它们放置到活动的droppable区域(即相册),并且删除那个dropped元素。
最后我们更新事件处理。
希望大家喜欢这个HTML5的图片拖放展示效果。
展开阅读全文
相关搜索