拖拽事件:
拖拽前要给每个元素都添加draggable='true';才能让元素进行拖拽
1、拖拽元素事件:事件对象为被拖拽元素:
.ondragstart 拖拽前触发此事件,拖拽的一瞬间
.ondrag 拖拽前和拖拽结束之间连续触发
.ondragend 拖拽结束触发;
2、目标元素事件:事件对象为目标元素:
.ondragenter 进入目标元素触发;相当于mouseover
.ondragover 进入目标元素和离开目标元素之间连续触发
.ondragleave 离开目标元素触发,相当于mouseout
.ondrop 在目标元素上释放鼠标触发;
!!!要想在目标元素中执行ondrop事件必须在ondragover事件中阻止默认事件:
目标元素.οndragοver=function(ev){
ev.preventDefault();
}
3、拖拽对象:
ev.dataTransfer
这个对象中的方法:
(1)setData(key,value); 当你拖拽一个元素的同时可以设置一个key值用来存放被拖拽元素的属性;
(2)getData();获取数据;根据setData();中设置数据的key值获取对应的value;
拖拽前要给每个元素都添加draggable='true';才能让元素进行拖拽
1、拖拽元素事件:事件对象为被拖拽元素:
.ondragstart 拖拽前触发此事件,拖拽的一瞬间
.ondrag 拖拽前和拖拽结束之间连续触发
.ondragend 拖拽结束触发;
2、目标元素事件:事件对象为目标元素:
.ondragenter 进入目标元素触发;相当于mouseover
.ondragover 进入目标元素和离开目标元素之间连续触发
.ondragleave 离开目标元素触发,相当于mouseout
.ondrop 在目标元素上释放鼠标触发;
!!!要想在目标元素中执行ondrop事件必须在ondragover事件中阻止默认事件:
目标元素.οndragοver=function(ev){
ev.preventDefault();
}
3、拖拽对象:
ev.dataTransfer
这个对象中的方法:
(1)setData(key,value); 当你拖拽一个元素的同时可以设置一个key值用来存放被拖拽元素的属性;
(2)getData();获取数据;根据setData();中设置数据的key值获取对应的value;
(3)setDragImage(元素,x,y);此方法设置元素被拖拽时跟随鼠标的元素样式以及鼠标的位置;
代码展示:
<div class="box"> <p>2313132</p> <span>哈哈哈</span> </div> <div class="box1"></div> <script> var box=document.getElementsByClassName('box')[0]; var box1=document.getElementsByClassName('box1')[0]; box.setAttribute('draggable','true'); //拖拽前要给每个元素添加draggable-true属性; box1.setAttribute('draggable','true'); box.ondragstart=function(event){ //拖拽的一瞬间触发此事件 event.dataTransfer.setData('a',this.innerHTML) //创建一个新的对象来盛放box var boxX=box.offsetWidth/2; //优化鼠标位置 var boxY=box.offsetHeight/2; //让拖拽的鼠标始终在box的中间 event.dataTransfer.setDragImage(this,boxX,boxY); //设置元素被拖拽时跟随鼠标的元素样式以及鼠标的位置 } box.ondrag=function () { //拖拽过程中一直执行 this.style.visibility='hidden'; //让当前的盒子隐藏 } box.ondragend=function () { //拖拽结束的时候触发 this.style.visibility='visible'; //让当前盒子显示 } box1.ondragenter=function () { //box被拖拽进入大盒子的一瞬间触发 } box1.ondragover=function (event) { //box在大盒子中移动时一直触发 event.preventDefault(); //如果想要在ondrop中执行事件,就一定要在ondrapover中阻止事件 } box1.ondrop=function (event) { //在目标元素上释放鼠标时触发 var box2=document.createElement('div'); //在页面创建一个新的div元素 box2.className='box'; //给其添加box的类名,模拟复原其css样式 box2.innerHTML=event.dataTransfer.getData('a') //然后把盛放box的对象a赋予给新元素上 this.append(box2) //在box1中添加新元素 var aX=event.offsetX-box.offsetWidth/2; //优化获取位置 var aY=event.offsetY-box.offsetHeight/2; console.log(aX); console.log(aY); box2.style.marginLeft=aX+'px'; box2.style.marginTop=aY+'px'; box.remove(); //最后在此删除原来的box元素 } box1.ondragout=function () { //当被拖拽的元素离开此元素一瞬间时触发的 } </script>