JS的ondrag事件(拖拽效果)
程序员文章站
2022-06-30 19:12:48
...
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>
转载于:https://www.jianshu.com/p/2dfb870e0b88