拖拽div等盒子模型,都是平常操做没有什么问题,若是是拖拽图片的话,会有一点小坑要踩......this
那么咱们看代码:spa
var Move_fn = {}; (function(Move_fn){ function Move_img() { } Move_img.prototype = { constructor:Move_img, pageInit: function(imgEle, imgContent) { this.Ele = imgEle; this.Box = imgContent; imgEle.className = "_positon";//添加定位属性便于计算拖拽位置 this._mw = imgContent.offsetWidth - imgEle.offsetWidth; this._mh = imgContent.offsetHeight - imgEle.offsetHeight; this.mouseDown(); this.closeEvt(); }, closeEvt:function() { var that = this; this.Box.onclick = function(e) { e.preventDefault(); e.stopPropagation(); if(e.target.tagName == "DIV" || e.srcElement.tagName == "div") { Elf.utils.remove(that.Box.parentNode, that.Box.parentNode.parentNode); } } }, mouseDown: function() { var that = this; this.Ele.onmousedown = function(e) { that.offX = e.offsetX; that.offY = e.offsetY; that.mouseMove(); } }, mouseMove: function(){ var that = this; document.onmousemove = function(e) { var l = e.clientX - that.offX; var t = e.clientY - that.offY; //判断边界设置最大最小值 if(t <= 0) { t = 0; } if(t >= that._mh) { t = that._mh; } if(l <= 0) { l = 0; } if(l >= that._mw) { l = that._mw; } that.Ele.style.top = t + "px"; that.Ele.style.left = l + "px"; that.mouseUp(); } }, mouseUp: function() { var that = this; document.onmouseup = function(e) { document.onmousemove = null; document.onmousedown = null; } } } Move_fn.move_img = new Move_img(); }(Move_fn));
使用方式也横简单,Move_fn.move_img.pageInit(imgShow, imgContent);初始化一下就行了。要求imgContent全屏遮盖prototype
如今来讲一下,图片拖拽的小坑。当鼠标移动到图片上的时候,会有一个,图片选中可拖拽的状态,这个时候咱们执行的是ondragstart、draggable事件,而不是自行添加的onmousemove事件。会形成的后果是什么呢?拖拽后图片卡顿,自行添加的鼠标抬起事件onmouseup失效,当咱们的鼠标抬起后依然会执行鼠标移动事件,即鼠标抬起后图片会跟着鼠标跑code
解决办法:禁止掉图片本身的拖拽事件
对要拖拽的图片添加几个属性 对象