zoukankan      html  css  js  c++  java
  • JavaScript拖拽 1.0

    这两天没什么心情,进步不大,心虚。刚搞了个简单的拖拽,试了下,IE 8.0, Firefox都可以

    var drag = {
        enable : function(domIdStr){
            var dom = document.getElementById(domIdStr);
            var diffX = 0, diffY = 0, draging = false;
            dom.style.position = 'absolute';
            dom.style.visibility = 'visible';
            dom.style.width = '200px';
            dom.style.height = '100px';
            dom.style.backgroundColor = 'teal';
            
            dom.onmousedown = function(e){
                e = e || window.event;
                draging = true;
                dom.style.cursor = 'move';
    			diffX = e.clientX - dom.offsetLeft;
    			diffY = e.clientY - dom.offsetTop;
    			if(dom.setCapture){
    			    dom.setCapture();
    			}
    			dom.onmousemove = function(e){
                    e = e || window.event;
    		        if(draging){
            	        dom.style.left = (e.clientX - diffX) + 'px';
            	        dom.style.top = (e.clientY - diffY) + 'px';
    		        }
                };
    	        dom.onmouseup = function(e){
    		        e = e || window.event;
    		        if(dom.releaseCapture){
    		            dom.releaseCapture();
    		        }
    		        draging = false;
    		        dom.style.cursor = 'default';
    		        dom.onmousemove = null;
    		        dom.onmouseup = null;
    		        
    	        };
            };
        }
    };
    

     稍作修改,再出个1.1版本,就不发新的blog了

    var drag = {
        enable : function(domIdStr, titleDomIdStr){
            var dom = document.getElementById(domIdStr);
            var title = document.getElementById(titleDomIdStr);
            var diffX = 0, diffY = 0, draging = false;
            dom.style.position = 'absolute';
            dom.style.visibility = 'visible';
            dom.style.width = '200px';
            dom.style.height = '100px';
            dom.style.backgroundColor = 'teal';
            
            title.onmousedown = function(e){
                e = e || window.event;
                draging = true;
                title.style.cursor = 'move';
                title.style.margin = 0;
                title.style.border = '1px solid yellow';
    			diffX = e.clientX - dom.offsetLeft;
    			diffY = e.clientY - dom.offsetTop;
    			if(title.setCapture){
    			    title.setCapture();
    			}
    			title.onmousemove = function(e){
                    e = e || window.event;
    		        if(draging){
            	        dom.style.left = (e.clientX - diffX) + 'px';
            	        dom.style.top = (e.clientY - diffY) + 'px';
    		        }
                };
    	        title.onmouseup = function(e){
    		        e = e || window.event;
    		        if(title.releaseCapture){
    		            title.releaseCapture();
    		        }
    		        draging = false;
    		        title.style.cursor = 'default';
    		        title.onmousemove = null;
    		        title.onmouseup = null;
    		        
    	        };
            };
        }
    };
    

      

  • 相关阅读:
    小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载一(PhoneGap中的API)
    有一种蓝,是神往,是心醉,是心伤
    persits.jpeg 水印组件
    SD卡操作相关的工具SDCardUtils
    apollo 消息分发源代码分析
    tcp ip协议笔记(1)——简单介绍
    百度地图SDK调试SDKInitializer.initialize(getApplicationContext())错误
    一气呵成编完代码的感觉对不正确
    多线程编程1-NSThread
    VIP的转移
  • 原文地址:https://www.cnblogs.com/realwall/p/2227096.html
Copyright © 2011-2022 走看看