JS的ondrag事件（拖拽效果）
2019-03-12 本文已影响0人
Gino_Li
draggable：
html元素属性，设置为true时，表示该元素可以进行拖动。
<p draggable="true" id = "testP"></p>
拖动事件：
1.dragstart：当元素拖动的时候触发
2.dragover：当元素拖动到目标容器时触发
3.drop：当元素拖动到目标容器并松开鼠标时触发
拖动事件四步走：
1.设置拖动元素为可拖动状态（也就是设置元素的draggable属性为true时）
2.给拖动元素添加dragstart事件：并通过事件对象的e.transfer对象的setData的方法设置一个属性
3.给目标容器添加drop事件，再通过事件对象的dataTransfer对象的getData方法来获取上一步设置的属性，从而获取到拖动元素，然后再通过appendChild方法将拖动元素添加到目标容器。
4.给目标容器添加dragover事件，用来阻止默认的拖动事件。
<body>
<!--第一步-->
<p id="testP" draggable="true" >拖动我</p>
<div class="test"></div>
<div class="test"></div>
<script>
var testP = document.querySelector('#testP');
var test = document.querySelector('.test');
//第二步
testP.addEventListener('dragstart',(e)=>{
//通过setData方法向dataTransfer对象添加一个属性
//名pid，值为拖动元素的ID
e.dataTransfer.setData('pid',e.target.id);
console.log(e.target)
})
//第三步
test.addEventListener('drop',(e)=>{
//获取到拖动元素的id
let data = e.dataTransfer.getData('pid');
//通过id获取到拖动元素
let p = document.getElementById(data);
console.log(p)
test.appendChild(p);
})
//第四步
document.addEventListener('dragover',function(e){
e.preventDefault();
})
</script>
</body>
拓展：
使用mousedown，mousemove，mousedown模拟拖拽效果
<body>
<div class="square"></div>
<script>
var square = document.querySelector('.square');
function drag(el){
var isClick = false;
el.addEventListener('mousedown',function(e){
isClick = true;
let x = e.clientX,
y = e.clientY,
//方块元素距离浏览器左边和顶部的距离
elLeft = el.offsetLeft,
elTop = el.offsetTop;
document.addEventListener('mousemove',function(e){
let clx = e.clientX;
let cly = e.clientY;
if(isClick==true){
//x-elLeft，点击元素位置距离元素左边边界的位置
//clx-(x-elLeft),
el.style.left= clx -(x-elLeft)+'px';
el.style.top=cly - (y- elTop)+'px';
}
})
})
document.addEventListener('mouseup',function(){
isClick=false;
})
}
drag(square);
</script>
</body>
