春困夏乏秋打盹,最近懒癌要犯了,为了督促自己学习,小生制定了一个计划——每天收集/记录/学习一个小技巧~~~
今天的小技巧如题,html5实现拖放以及利用mouse事件实现简单拖拽,本文将依次介绍,若有不妥之处,还望这位看官留言指正~~~
实例参考博客:
http://blog.csdn.net/baidu_31333625/article/details/53811510
//===============================================================
一、html5实现拖拽
html5实现拖拽的过程十分类似于煎鸡蛋 ╮(╯▽╰)╭
鸡蛋 = 被拖拽物体,平底锅 = 拖拽放入的目标元素
(1)确定这颗鸡蛋有没有坏掉,放好平底锅——确定元素是否可拖动,即 被拖拽物体 的draggable=true?,添加 目标元素
<div id="targetObj"></div><i id= "ball" class= "ball" draggable= "true" ></i>
(2)打碎鸡蛋做好准备——给 被拖拽物体 添加 dragstart 事件监听,在拖拽开始后触发,只触发一次
document.getElementById('ball').addEventListener('dragstart',function(event){ //开始拖拽 //dataTransfer对象只用于拖拽事件中,用来存储拖拽数据,text/url类型,本次存储内容为标签id event.dataTransfer.setData('Text',event.target.id); console.log('针对被拖拽物体,开始拖拽: '); //用于查看拖拽的整个过程中事件发生顺序 });
(3)把鸡蛋平移到平底锅上方——给 目标元素 添加 dragenter事件监听,在 被拖拽元素 移动进 目标元素 时触发,每次进入都会触发,一次进入过程触发一次
document.getElementById("targetObj").