原生js拖拽

<!DOCTYPE>
<html>
<head>
<title> jQuery拖拽插件drag.js </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div id="draggable" style="width:300px">拖动的对象</div>
<script>
   var div = document.getElementById("draggable");
   cloneMove(div);
   function cloneMove(cloneMoves) {
let self = this;
var disX = 0;
var disY = 0;
cloneMoves.onmousedown = function (event) {
var event = event || window.event;
disX = event.clientX - this.offsetLeft;
disY = event.clientY - this.offsetTop;
var cloneTemp = cloneMoves.cloneNode(true);

var appendLi = document.createElement("div");
                                       appendLi.innerHTML = "添加的";
                                       appendLi.style.position = "absolute";
var id = cloneMoves.id;
cloneTemp = appendLi;
appendLi.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
appendLi.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
document.body.appendChild(cloneTemp);
cloneMoves.setCapture && cloneMoves.setCapture(); //将Mouse事件锁定到指定元素上。
document.onmousemove = function (event) {
var event = event || window.event;
var iL = event.clientX;
/*- disX;*/
var iT = event.clientY;
/* - disY;*/
var maxL = document.documentElement.clientWidth - cloneMoves.offsetWidth;
var maxT = document.documentElement.clientHeight - cloneMoves.offsetHeight;
iL <= 0 && (iL = 0);
iT <= 0 && (iT = 0);
iL >= maxL && (iL = maxL);
iT >= maxT && (iT = maxT);
cloneTemp.style.left = iL + "px";
cloneTemp.style.top = iT + "px";

event.stopPropagation && event.stopPropagation();
event.preventDefault;
event.returnValue = false;
event.cancelBubble = true;
return false;
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
this.setCapture && this.setCapture();
cloneMoves.releaseCapture && cloneMoves.releaseCapture();
return false
}
                               }
</script>

</body>
</html>

猜你喜欢