zoukankan      html  css  js  c++  java
  • 原生js实现拖拽效果

    面向对象 + 原生js拖拽

    拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩......

    那么我们看代码:

    ``` 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));

    <p>使用方式也横简单,Move_fn.move_img.pageInit(imgShow, imgContent);初始化一下就好了。要求imgContent全屏遮盖</p>
    <p>现在来说一下,图片拖拽的小坑。当鼠标移动到图片上的时候,会有一个,图片选中可拖拽的状态,这个时候我们执行的是ondragstart、draggable事件,而不是自行添加的onmousemove事件。会造成的后果是什么呢?拖拽后图片卡顿,自行添加的鼠标抬起事件onmouseup失效,当我们的鼠标抬起后依然会执行鼠标移动事件,即鼠标抬起后图片会跟着鼠标跑</p>
    ![](https://images2018.cnblogs.com/blog/1244681/201809/1244681-20180903161715077-1922354997.png)
    
    <p>解决办法:禁止掉图片自己的拖拽事件<br />
    对要拖拽的图片添加几个属性
    <ul>
    	<li>oncontextmenu:"false"&nbsp;&nbsp;&nbsp;&nbsp;<span>禁止图片右键菜单弹出</span></li>
    	<li>onselectstart:"false"&nbsp;&nbsp;&nbsp;&nbsp;<span>禁止图片选中</span></li>
    	<li>ondragstart:"false"&nbsp;&nbsp;&nbsp;&nbsp;<span>禁止图片拖拽</span></li>
    	<li>draggable:"false"&nbsp;&nbsp;&nbsp;&nbsp;<span>禁止图片拖拽</span></li>
    </ul>
    </p>
  • 相关阅读:
    用wamp配置的环境,想用CMD连接mysql怎么连
    Mysql删除表
    MySQL创建表
    Leetcode 130. Surrounded Regions
    Leetcode 111. Minimum Depth of Binary Tree
    Leetcode 110. Balanced Binary Tree
    Leetcode 98. Validate Binary Search Tree
    Leetcode 99. Recover Binary Search Tree
    Leetcode 108. Convert Sorted Array to Binary Search Tree
    Leetcode 105. Construct Binary Tree from Preorder and Inorder Traversal
  • 原文地址:https://www.cnblogs.com/frogblog/p/9579146.html
Copyright © 2011-2022 走看看