• 原生js拖拽元素(onmouseup不能够触发的原因)


    我们经常会遇见拖拽某一个元素的场景,拖拽也是很常用的;
    这次拖拽遇见一个问题,有时在拖拽的时候吗,鼠标松开,元素仍然可以拖拽;
    经过查阅资料,发现:
    会触发H5原生的拖拽事件。并且不会监听到onmouseup,
    从而导致鼠标松开也能够拖拽。
    解决办法就是直接干掉H5的拖拽事件
    document.ondragstart = function(ev) {
    	ev.preventDefault();
    };
    document.ondragend = function(ev) {
    	ev.preventDefault();
    };
    
    onmouseup不能够触发的原因:https://blog.csdn.net/z467469274/article/details/77332830?utm_source=blogxgwz2
    拖拽讲解		https://blog.csdn.net/weixin_41910848/article/details/82218243
    
    <div class="box" id="drag"></div>
    
    		
    <script type="text/javascript">
    window.onload = function(){
    	var drag = document.getElementById('drag');
    	// //点击某物体时,用drag对象即可,move和up是全局区域,
    	// 也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动)  
       
    	// 按下
    	drag.onmousedown = function(event){
    		console.log("drag按下的时候触发 " , )
    		var event = event || window.event;  //兼容IE浏览器
    		//    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
    	         var diffX = event.clientX - drag.offsetLeft;
    	         var diffY = event.clientY - drag.offsetTop;
    	         if(typeof drag.setCapture !== 'undefined'){
    			  drag.setCapture(); 
    	         }
    	   
    	   
    		// 移动
    		document.onmousemove = function(event){
    			var event = event || window.event;
    			var moveX = event.clientX - diffX;
    			var moveY = event.clientY - diffY;
    			if(moveX < 0){
    				moveX = 0
    			}else if(moveX > window.innerWidth - drag.offsetWidth){
    				moveX = window.innerWidth - drag.offsetWidth
    			}
    			if(moveY < 0){
    				moveY = 0
    			}else if(moveY > window.innerHeight - drag.offsetHeight){
    				moveY =  window.innerHeight - drag.offsetHeight
    			}
    			drag.style.left = moveX + 'px';
    			drag.style.top = moveY + 'px'
    		}
    	
    		// 抬起停止移动
    		document.onmouseup = function(event){
    			console.log(  "抬起停止移动" )
    			this.onmouseup = null;
    			this.onmousemove = null;
    			
    			 //修复低版本ie bug  
    			if(typeof drag.releaseCapture!='undefined'){  
    			   drag.releaseCapture();  
    			}  
    		}
    		
    		// 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
    		document.ondragstart = function(ev) {
    			ev.preventDefault();
    			console.log(1212)
    		};
    		document.ondragend = function(ev) {
    			ev.preventDefault();
    			console.log("asd")
    		};
    		
    						
    	}
    }
    </script>
    

    如果你是vue的话,封装改方法

      Vue.prototype.dragandDrop=function(ele){
                var drag = document.getElementById(ele);
                // //点击某物体时,用drag对象即可,move和up是全局区域,
                // 也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动)  
                drag.onmousedown = function(event){
                    var event = event || window.event;  //兼容IE浏览器
                    //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
                    var diffX = event.clientX - drag.offsetLeft;
                    var diffY = event.clientY - drag.offsetTop;
                    if(typeof drag.setCapture !== 'undefined'){
                            drag.setCapture(); 
                    }
                    if(event.stopPropagation) event.stopPropagation();
                    if(event.preventDefault) event.preventDefault();
    
                    document.onmousemove = function(event){
                        var event = event || window.event;
                        var moveX = event.clientX - diffX;
                        var moveY = event.clientY - diffY;
                        if(moveX < 0){
                            moveX = 0
                        }else if(moveX > window.innerWidth - drag.offsetWidth){
                            moveX = window.innerWidth - drag.offsetWidth
                        }
                        if(moveY < 0){
                            moveY = 0
                        }else if(moveY > window.innerHeight - drag.offsetHeight){
                            moveY =  window.innerHeight - drag.offsetHeight
                        }
                        drag.style.left = moveX + 'px';
                        drag.style.top = moveY + 'px'
                    }
                }
            }
    
            // 抬起方法(拖拽停止)
            Vue.prototype.stop=function(ele){
                console.log(11);
                document.onmouseup = function(event){
                    var event = event || window.event;  //兼容IE浏览器
    
                    if(event.stopPropagation) event.stopPropagation();//这个可以删除
                    if(event.preventDefault) event.preventDefault();//这个可以删除
    
                    console.log( " this.onmousemove", this.onmousemove);
                    this.onmousemove = null;
                    this.onmouseup = null;
                }
            }
    
    

    使用

       <rich-text class="rich-text-com"   id="richdragIndex"  @aaa="down"  @bbb="upuo"></rich-text>
    
    <script>
    // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
    document.ondragstart = function(ev) {
        ev.preventDefault();
    };
    document.ondragend = function(ev) {
        ev.preventDefault();
    };
    
     export default {
         data(){
                return{
    
                }
        },
         methods:{
                down(){
                    console.log("ppp");
                    this.dragandDrop("richdragIndex");
                },
                upuo(){
                    console.log("触发抬起");
                    this.stop("richdragIndex")
                }
          }
     }
     
    
  • 相关阅读:
    字符串的比较方法---Java
    [模板]二进制枚举
    [唯一分解定理]感谢ZLY讲解
    [数学] 小数点后第n位
    [模板]二维前缀和
    [模板]欧拉函数及其应用
    [51nod] 1024 矩阵中不重复的元素
    Codeforces Round #521 (Div. 3) D. Cutting Out
    [差分] [POJ] 3276 Face The Right Way
    Educational Codeforces Round 54 (Rated for Div. 2) C. Meme Problem
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/13501598.html
Copyright © 2020-2023  润新知