JavaScript拖拽 1.0

最新推荐文章于 2025-08-14 17:31:00 发布

转载最新推荐文章于 2025-08-14 17:31:00 发布 · 44 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/realwall/archive/2011/10/27/2227096.html

文章标签：

#javascript #ViewUI

本文介绍了拖拽功能的基本实现及优化过程，包括在不同浏览器（IE8.0, Firefox）上的兼容性测试。通过引入事件监听和元素定位，实现了元素在页面上的拖拽与位置调整。后续版本通过增加标题元素的拖拽支持，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天没什么心情，进步不大，心虚。刚搞了个简单的拖拽，试了下，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;
		        
	        };
        };
    }
};

转载于:https://www.cnblogs.com/realwall/archive/2011/10/27/2227096.html