<head>
<meta charset="utf-8">
<title>拖拽效果</title>
<style type="text/css">
.drag_main{
width:50px;
height:50px;
position: absolute;
top:10px;
left:10px;
}
.drag_main img{
width:50px;
height:50px;
}
</style>
</head>
<body>
<div class="drag_main" id="dragImg" draggable="true"><img src="dargImg.png"></div>
</body>
<script type="text/javascript">
//原生js实现
//querySelector() 匹配指定 CSS 选择器的一个元素。
var dragImg = document.querySelector("#dragImg");
var x,y;
dragImg.addEventListener('dragstart', (e) =>{
console.log("start e",e);
//dataTransfer存储拖拽到浏览器的数据
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text",'');
x = e.offsetX || e.layerX;
y = e.offsetY || e.layerY;
return true;
},false)
document.addEventListener('dragover', (e) =>{
//取消事件的默认动作和停止事件的传播
e.preventDefault() || e.stopPropagation();
},false)
document.addEventListener('drop', (e) =>{
console.log("drop e",e);
dragImg.style.left = (e.pageX - x) + 'px';
dragImg.style.top = (e.pageY - y) + 'px';
e.preventDefault() || e.stopPropagation();
},false)
</script>原生javaScript实现拖拽功能
猜你喜欢
转载自blog.csdn.net/xiaoxia188/article/details/80748589
今日推荐
周排行