<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#drug {
width: 100px;
height: 100px;
background-color: #e4393c;
position: absolute;
}
</style>
</head>
<body>
<div id="drug"></div>
<script>
var drugs = function (element, callback) {
callback = callback || function () {
}
var param = {
top: 0,
left: 0,
cX: 0,
cY: 0,
pause: false,
};
function getCss(ele, key) {
return ele.currentStyle ? ele.currentStyle[key] : document.defaultView.getComputedStyle(ele, null)[key];
}
var lefts = getCss(element, "left");
var tops = getCss(element, "top");
param.left = lefts !== "auto" ? lefts : 0;
param.top = tops !== "auto" ? tops : 0;
element.onmousedown = function (event) {
// console.log(1);
param.pause = true;
event = event || window.event;
param.cX = event.clientX;
param.cY = event.clientY;
};
document.onmousemove = function (event) {
event = event || window.event;
if (param.pause) {
// console.log(2);
var nowX = event.clientX,
nowY = event.clientY;
var disX = nowX - param.cX,
disY = nowY - param.cY;
element.style.left = parseInt(param.left) + disX + "px";
element.style.top = parseInt(param.top) + disY + "px";
}
};
document.onmouseup = function () {
//console.log(3);
param.pause = false;
var lefts = getCss(element, "left"),
tops = getCss(element, "top");
param.left = lefts !== "auto" ? lefts : 0;
param.top = tops !== "auto" ? tops : 0;
}
}(document.getElementById("drug"));
</script>
</body>
</html>原生js 實現節點拖拽
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章