用js拖拽div

ゝ一纸荒年。 2022-11-29 14:30 299阅读 0赞

描述：  
拖拽div元素，主要用到以下三个事件  
onmousedown  
onmousemove  
onmouseup  
当拖拽网页中的内容时，浏览器会默认搜索引擎进行搜索，  
如果取消该行为，可返回return false,但IE8不行  
setCapture();可对事件进行捕获，当调用该方法是，该元素会把下一次的所有相关事件都揽在自身上,该方法只在IE中执行  
js代码：

<script type="text/javascript">
    		window.onload = function(){
    			/*拖拽div元素
    			 onmousedown
    			 onmousemove
    			 onmouseup
    			 * */
    			var box12 = document.getElementById("box12");
    			drag(box12);
     function drag(obj){
    			obj.onmousedown = function(event){
    				
    				if(obj.setCapture){
    					obj.setCapture();
    				}
    				//obj.setCapture &&  obj.setCapture();
    				event = event || window.event;
    				var x = event.clientX-obj.offsetLeft;
    				var y = event.clientY- obj.offsetTop;
    			var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
    			var st = document.body.scrollTop || document.documentElement.scrollTop;
    			document.onmousemove=function(event){
    				event = event || window.event;
    				
    				var left = event.clientX;
    				var top = event.clientY;
    				obj.style.left = left-x+sl+"px";
    				obj.style.top = top-y+st+"px";
    			};
    			
    			document.onmouseup=function(){
    				document.onmousemove = null;
    				document.onmouseup = null;
    				//鼠标松开时取消捕获
    				obj.releaseCapture && obj.releaseCapture();
    			};
    			/*
    			 当拖拽网页中的内容时，浏览器会默认搜索引擎进行搜索，
    			 如果取消该行为，可返回return false,但IE8不行
    			 setCapture();可对事件进行捕获，当调用该方法是，该元素会把下一次
    			 的所有相关事件都揽在自身上,该方法只在IE中执行
    			 
    			 * */
    			return false;
    			};
    		};
    		}
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

相关拖拽div

被拖拽元素需要绝对定位。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

怼烎@/ 2023年10月06日 15:32/ 0 赞/ 66 阅读

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 45 阅读

相关 js拖拽

拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起

怼烎@/ 2023年06月09日 04:59/ 0 赞/ 30 阅读

相关用js拖拽div

描述：拖拽div元素，主要用到以下三个事件 onmousedown onmousemove onmouseup 当拖拽网页中的内容时，浏览器会默认搜索引擎

ゝ一纸荒年。/ 2022年11月29日 14:30/ 0 赞/ 300 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 247 阅读

相关原生js鼠标拖拽div左右滑动

![2018041314472714][] ![20180413144737216][] <!DOCTYPE html> <html lang="en">

一时失言乱红尘/ 2022年05月27日 06:54/ 0 赞/ 266 阅读

相关 JS 拖拽

实现后效果 ![70][] 实现原理： 1. 在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发 2. 监听mousemov

╰半夏微凉°/ 2022年05月22日 08:50/ 0 赞/ 341 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 305 阅读

相关 javascript之div的拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

叁歲伎倆/ 2022年04月18日 05:11/ 0 赞/ 265 阅读

相关 js拖拽div例子

1.demo.html \-------------------------------- <!doctype html> <!--\[if IE 7 \]>

客官°小女子只卖身不卖艺/ 2021年11月01日 03:34/ 0 赞/ 385 阅读