使用js写一个简单的元素拖拽移动功能，按下鼠标左键然后移动元素，鼠标左键弹起移动停止。上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>拖拽移动元素 - 演示 | 方文锋的个人网站</title>
<style type="text/css">
.position {
position: fixed;
left: 100px;
top: 50px;
z-index: 9999;
}
#drag {
min-width: 300px;
min-height: 200px;
max-width: 600px;
max-height: 400px;
background: #269abc;
}
</style>
</head>
<body>
<div id="drag" class="position"></div>
<script type="text/javascript">
/**
* 获取css样式
* @param obj
* @param style_attr
* @return {string}
*/
function getCSS(obj, style_attr) {
return window.getComputedStyle ? getComputedStyle(obj)[style_attr] : obj.currentStyle[style_attr];
}
/**
* 拖拽移动元素
* @param {string|object} ele 元素标签或元素id属性值
* @param {object} event [事件对象]
* @param {boolean} m_offset
* @return {object}
*/
function drag_ele(ele, event, m_offset) {
typeof ele === "string" && (ele = document.getElementById(ele));
//是否停止移动
if (ele.is_up === true) {
return false;
}
var e = event || window.event;
var W = document.documentElement.clientWidth || window.innerWidth || window.screen.width;
var H = document.documentElement.clientHeight || window.innerHeight || window.screen.height;
//左侧和顶部边界允许超出的值
if (typeof ele.is_mode === "number" && ele.is_mode > 1) {
ele.proportionX = ele.offsetWidth / ele.is_mode;
ele.proportionY = ele.offsetHeight / ele.is_mode;
} else {
ele.proportionX = 0;
ele.proportionY = 0;
}
//距离左侧最大距离
var maxX = W - ele.offsetWidth + ele.proportionX;
//距离顶部最大距离
var maxY = H - ele.offsetHeight + ele.proportionY;
//距离左侧最小距离
var minX = -ele.proportionX;
//距离顶部最小距离
var minY = -ele.proportionY;
//获取鼠标的坐标
var mX = e.clientX;
var mY = e.clientY;
//鼠标相对与元素的左边和顶部偏移量(鼠标按下的时候获取)
if (m_offset) {
//当前距离左侧的距离
var X = parseInt(getCSS(ele, "left"), 10);
//当前距离顶部的距离
var Y = parseInt(getCSS(ele, "top"), 10);
ele.dX = mX - X;
ele.dY = mY - Y;
}
//元素左边和顶部偏移量
var offsetX = mX - ele.dX;
var offsetY = mY - ele.dY;
//边界判断
(offsetX >= maxX) && (offsetX = maxX);
(offsetY >= maxY) && (offsetY = maxY);
(offsetX < minX) && (offsetX = minX);
(offsetY < minY) && (offsetY = minY);
//设置元素样式
ele.style.left = offsetX + "px";
ele.style.top = offsetY + "px";
//停止移动
(typeof ele.stop === "function") || (ele.stop = function (ev, fn) {
var e = ev || window.event;
(typeof fn === "function") && fn.call(ele, e);
ele.is_up = true;
return ele;
});
//继续移动
(typeof ele.continue === "function") || (ele.continue = function (ev, fn) {
var e = ev || window.event;
(typeof fn === "function") && fn.call(ele, e);
var mX = e.clientX;
var mY = e.clientY;
var X = parseInt(getCSS(ele, "left"), 10);
var Y = parseInt(getCSS(ele, "top"), 10);
ele.dX = mX - X;
ele.dY = mY - Y;
ele.is_up = false;
return ele;
});
/**
* @param {number} n 设置运行超出边界的部分值比例(1/n)
*/
(typeof ele.mode === "function") || (ele.mode = function (n, ev, fn) {
var e = ev || window.event;
(typeof fn === "function") && fn.call(ele, e);
ele.is_mode = typeof n === "number" ? n : 0;
return ele;
});
return ele;
}
(function () {
var ele = document.getElementById("drag");
ele.onmousedown = function (e) {
drag_ele(ele, e, true);
ele.continue(e).mode(3, e);
ele.style.cursor = "move";
};
ele.onmouseup = function (e) {
ele.stop(e);
ele.style.cursor = "default";
};
window.onmousemove = function (e) {
drag_ele(ele, e, false);
};
})();
</script>
</body>
</html>