原生js的拖拽事件
程序员文章站
2022-06-30 19:13:42
...
根据智能社的教程，写的demo。
主要是看网上的很多都有各种各样的bug，这是在上大学期间看的****，现在拿出来在这里做个备注；
各位同行有用到的请点个赞再走
给右下角的红色区域添加拖拽事件，
提示：根据项目的不同布局，有的需要对其中的参数进行调整
具体的demo如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 100px;
background: yellow;
position: absolute;
}
.tag {
/* display: none; */
position: absolute;
width: 20px;
height: 20px;
background: red;
z-index: 999999;
right: 0;
bottom: 0;
}
.box:hover .tag {
display: block;
}
.border {
border: 1px dotted black;
position: absolute;
}
</style>
</head>
<body>
<div id="box" class="box" style="height: 100px;">
<div class="tag" id="tag">
</div>
</div>
</body>
<script>
window.onload = function() {
var oBox = document.getElementById('box');
var oTag = document.getElementById('tag');
var oBoxHeight = oBox.offsetHeight;
var disX = 0;
var disY = 0;
oTag.onmousedown = function(ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oBox.offsetLeft;
disY = oEvent.clientY - oBox.offsetTop;
var oBorder = document.createElement('div'); //按下鼠标时创建新的div
//加了border的样式，宽度和高度都-2
oBorder.className = 'border';
oBorder.style.width = oBox.offsetWidth - 2 + 'px';
oBorder.style.height = oBox.offsetHeight - 2 + 'px';
oBorder.style.left = oBox.offsetLeft + 'px'; //初始创建div的位置，处理在左上角的闪烁问题
oBorder.style.top = oBox.offsetTop + 'px';
document.body.appendChild(oBorder); //添加到body中
document.onmousemove = function(ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if (l < 0) //左侧的距离<0 l=0
{
l = 0;
} else if (l > document.documentElement.clientWidth - oBox.offsetWidth)
//右侧的距离：可视区的宽度-div本身的宽度
{
l = document.documentElement.clientWidth - oBox.offsetWidth;
}
if (t < 0) {
t = 0;
}
else if (t > document.documentElement.clientHeight - oBox.offsetHeight) {
t = document.documentElement.clientHeight - oBox.offsetHeight;
}
oBox.style.left = l + 'px';
oBox.style.top = t + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
//将原来div的位置设置成跟oBorder一样
oBorder.style.left = oBox.offsetLeft + 'px';
oBorder.style.top = oBox.offsetTop + 'px';
document.body.removeChild(oBorder); //松开后移除原来的box
};
return false; //chrome、ff、IE9
};
};
</script>
</html>
上一篇： iphone6 上市时间敲定何时
下一篇： 原生js的拖拽事件