單個元素拖拽，不隨頁面滾動
css 部分
body{height:2000px;} div{width:150px; height:150px;cursor: move;position: fixed;top:50px;color:#fff;box-sizing: border-box;z-index: 10;font-size: 16px} #ele{background:#2196f3;left:10px; }
js 部分
window.onload=function(){ // 獲取元素 var Div=document.getElementById('ele'); drag(Div); }
1 // 拖拽運動 2 function drag(Div){ 3 4 var lastX=0; 5 var lastY=0; 6 7 Div.onmousedown=function(ev) 8 { 9 var Ev=ev||event; 10 var disX=Ev.clientX-parseInt(getStyle(Div,'left')); 11 var disY=Ev.clientY-parseInt(getStyle(Div,'top')); 12 13 if(Div.setCapture)//釋放捕獲 針對IE 14 { 15 document.onmousemove=Move; 16 document.onmouseup=Up; 17 Div.setCapture(); 18 } 19 else 20 { 21 document.onmousemove=Move; 22 document.onmouseup=Up; 23 } 24 // 鼠標移動 25 function Move(ev) 26 { 27 var Ev=ev||event; 28 var l=Ev.clientX-disX; 29 var t=Ev.clientY-disY; 30 31 32 if(l>=document.documentElement.clientWidth-parseInt(getStyle(Div,'width'))) 33 { 34 l=document.documentElement.clientWidth-parseInt(getStyle(Div,'width')); 35 } 36 else if(l<=0) 37 { l=0; } 38 39 if(t>=document.documentElement.clientHeight-parseInt(getStyle(Div,'height'))) 40 { 41 t=document.documentElement.clientHeight-parseInt(getStyle(Div,'height')); 42 } 43 else if(t<=0) 44 { t=0; } 45 46 lastX=l; 47 lastY=t; // 當前的點賦給一個變量（上一個點） 48 Div.style.left=l+'px'; 49 Div.style.top=t+'px'; //移動物體 50 } 51 // 鼠標擡起 52 function Up() 53 { 54 document.onmousemove=null; 55 document.onmouseup=null; 56 if(Div.releaseCapture) 57 { Div.releaseCapture(); } 58 59 } 60 return false; 61 } 62 } 63 64 //提取非行間樣式 65 function getStyle(obj,attr) 66 { 67 if(obj.currentStyle) 68 { return obj.currentStyle[attr];} 69 else 70 { return getComputedStyle(obj,false)[attr];} 71 }
html 部分
<body> <div id="ele">單個退拽元素<br/>原生js<br/>不跟隨頁面滾動</div> </body>
多個元素拖拽，不隨頁面滾動
css 部分
body{height:2000px;} div{width:150px; height:150px;cursor: move;position: fixed;top:50px;color:#fff;box-sizing: border-box;z-index: 10;font-size: 16px} #ele1{background:#2196f3;left:10px; } #ele2{background:#ff5722;left:180px;} #ele3{background:#08c80f;left:360px; }
js 部分
window.onload=function(){ //獲取拖拽的元素 var ele1=document.getElementById('ele1'); var ele2=document.getElementById('ele2'); var ele3=document.getElementById('ele3'); // 層級問題默認 ele1:1,ele2:2,ele3:3 // 定義公共層級變量,3個定義的一樣，這裏取了第一個 this.layer=parseInt(getStyle(ele1,'z-index')) drag(ele1); drag(ele2); drag(ele3); }
1 // 拖拽運動 2 function drag(ele){ 3 var Div=ele; 4 var lastX=0; 5 var lastY=0; 6 7 Div.onmousedown=function(ev) 8 { 9 var Ev=ev||event; 10 var disX=Ev.clientX-parseInt(getStyle(Div,'left')); 11 var disY=Ev.clientY-parseInt(getStyle(Div,'top')); 12 13 if(Div.setCapture)//設置釋放捕獲 針對IE 14 { 15 document.onmousemove=Move; 16 document.onmouseup=Up; 17 Div.setCapture(); 18 } 19 else 20 { 21 document.onmousemove=Move; 22 document.onmouseup=Up; 23 } 24 // 鼠標移動 25 function Move(ev) 26 { 27 var Ev=ev||event; 28 var l=Ev.clientX-disX; 29 var t=Ev.clientY-disY; 30 Div.style.zIndex=window.layer=window.layer+1 31 32 if(l>=document.documentElement.clientWidth-parseInt(getStyle(Div,'width'))) 33 { 34 l=document.documentElement.clientWidth-parseInt(getStyle(Div,'width')); 35 } 36 else if(l<=0) 37 { l=0; } 38 39 if(t>=document.documentElement.clientHeight-parseInt(getStyle(Div,'height'))) 40 { 41 t=document.documentElement.clientHeight-parseInt(getStyle(Div,'height')); 42 } 43 else if(t<=0) 44 { t=0; } 45 46 lastX=l; 47 lastY=t; // 當前的點賦給一個變量（上一個點） 48 Div.style.left=l+'px'; 49 Div.style.top=t+'px'; //移動物體 50 } 51 // 鼠標擡起 52 function Up() 53 { 54 document.onmousemove=null; 55 document.onmouseup=null; 56 if(Div.releaseCapture) 57 { Div.releaseCapture(); } 58 59 } 60 return false; 61 }// onmousedown 結束 62 } 63 64 //提取非行間樣式 65 function getStyle(obj,attr) 66 { 67 if(obj.currentStyle) 68 { return obj.currentStyle[attr];} 69 else 70 { return getComputedStyle(obj,false)[attr];} 71 }
html 部分
<body> <div id="ele1">多個退拽元素<br/>原生js<br/>不跟隨頁面滾動<br/>最後拖拽的在最上面</div> <div id="ele2">多個退拽元素<br/>原生js<br/>不跟隨頁面滾動<br/>最後拖拽的在最上面</div> <div id="ele3">多個退拽元素<br/>原生js<br/>不跟隨頁面滾動<br/>最後拖拽的在最上面</div> </body>
單個元素拖拽，添加選項配置
css 部分
/*body{height:2000px;width:2000px;}*/ *{margin:0px;padding:0px;} p{margin:150px; } /*如果父元素不是body,建議手動指定 left top 值，如果不指定 默認 bottom:0; left:50( 我這裏設置margin:50 原因); */ #warp{width:500px;height:500px;border: 1px #ccc solid;margin:50px; background: #fff;left:50px;top:50px;} #ele{width:150px; height:150px;cursor: move;color:#fff;box-sizing: border-box;z-index: 10;font-size: 16px;background:#2196f3; }
js 部分
配置參數：
top,bottom,left,right 默認值爲 0 ，拖拽元素 距離 範圍元素（默認body） 的距離
direction 拖拽方向，默認爲任意方向，lr(左右) tb(上下)
parent:'warp', 爲頁面唯一元素，拖拽元素活動範圍 元素，id 名稱，例如 warp ,默認body整個頁面
scroll:false 拖拽元素是否隨 頁面滾動 false 不隨頁面滾動，true 隨頁面滾動
window.onload=function(){ // 配置選項 var opt={ top:0, bottom:0, left:20, right:10, parent:'warp', // 爲頁面唯一元素，id 名稱，例如 warp ,默認body整個頁面 scroll:false // 拖拽元素是否隨 頁面滾動 false 不隨頁面滾動，true 隨頁面滾動 } var obj=document.getElementById('ele'); // 調用退拽函數 drag(obj,opt); }
1 // 拖拽運動 2 function drag(obj,opt={},){ 3 // 默認配置選項 4 var option={ 5 direction:'auto',//方向 lr(左右) tb(上下) 6 // 運動範圍 默認父級邊界 7 top:0, 8 bottom:0, 9 left:0, 10 right:0, 11 //parent:'warp', // 爲頁面唯一元素，id 名稱，例如 warp ,默認body整個頁面 12 scroll:false // 拖拽元素是否隨 頁面滾動 false 不隨頁面滾動，true 隨頁面滾動 13 } 14 // 合併對象參數 15 Object.assign(option,opt) 16 17 var lastX=0; 18 var lastY=0; 19 var parent_width=0,parent_height=0,parent_left=0,parent_top=0; 20 var ele_position='fixed' 21 if(option.scroll){ 22 ele_position='absolute' 23 }else{ 24 // 如果不跟隨頁面滾動，並且元素父級不是body,父元素定位, 25 if(option.parent) 26 document.getElementById(option.parent).style.position='fixed' 27 } 28 29 // 設置元素的定位，需要放置獲取 parent_* 值之前 30 obj.style.position=ele_position 31 32 if(option.parent){ 33 var parent_ele=document.getElementById(option.parent) 34 parent_width=parent_ele.clientWidth; 35 parent_height=parent_ele.clientHeight; 36 parent_left=parent_ele.offsetLeft; 37 parent_top=parent_ele.offsetTop; 38 }else{ 39 if(option.scroll){ 40 parent_width=document.documentElement.scrollWidth 41 parent_height=document.documentElement.scrollHeight 42 }else{ 43 parent_width=document.documentElement.clientWidth 44 parent_height=document.documentElement.clientHeight 45 } 46 } 47 48 // 設置元素位置 49 obj.style.left=option.left+parent_left+'px' 50 obj.style.top=option.top+parent_top+'px' 51 52 obj.onmousedown=function(ev) 53 { 54 var Ev=ev||event; 55 var disX=0,disY=0; 56 57 if(option.direction=="lr"){ 58 disX=Ev.clientX-parseInt(getStyle(obj,'left')); 59 }else if(option.direction=="tb"){ 60 disY=Ev.clientY-parseInt(getStyle(obj,'top')); 61 }else{ 62 disX=Ev.clientX-parseInt(getStyle(obj,'left')); 63 disY=Ev.clientY-parseInt(getStyle(obj,'top')); 64 } 65 66 if(obj.setCapture)//設置鼠標捕獲 針對IE 67 { 68 document.onmousemove=Move; 69 document.onmouseup=Up; 70 obj.setCapture(); 71 }else 72 { 73 document.onmousemove=Move; 74 document.onmouseup=Up; 75 } 76 // 鼠標移動 77 function Move(ev) 78 { 79 var Ev=ev||event; 80 var left=0,top=0,move_left=0,move_top=0 81 if(option.direction=="lr"){ 82 // 可移動的最大左邊距離 83 move_left=parent_width-parseInt(getStyle(obj,'width'))-option.right+parent_left 84 if(left>=move_left){ 85 left=move_left 86 }else if(left<=option.left+parent_left){ 87 left=option.left+parent_left 88 }else{ 89 left=Ev.clientX-disX; 90 } 91 lastX=left; 92 obj.style.left=left+'px'; 93 94 }else if(option.direction=="tb"){ 95 // 可以移動的最大上邊距 96 move_top=parent_height-parseInt(getStyle(obj,'height'))-option.top+parent_top 97 if(top>=move_top){ 98 top=move_top 99 }else if(top<=option.bottom+parent_top){ 100 top=option.bottom 101 }else{ 102 top=Ev.clientY-disY; 103 } 104 lastY=top; 105 obj.style.top=top+'px'; 106 }else{ 107 left=Ev.clientX-disX; 108 top=Ev.clientY-disY; 109 110 move_left=parent_width-parseInt(getStyle(obj,'width'))-option.right+parent_left 111 move_top=parent_height-parseInt(getStyle(obj,'height'))-option.bottom+parent_top 112 113 if(left>=move_left){ 114 left=move_left 115 }else if(left<=option.left+parent_left){ 116 left=option.left+parent_left 117 } 118 if(top>=move_top){ 119 top=move_top 120 }else if(top<=option.bottom+parent_top){ 121 top=option.bottom+parent_top 122 } 123 124 lastX=left; 125 lastY=top; // 當前的點賦給一個變量（上一個點） 126 obj.style.left=left+'px'; 127 obj.style.top=top+'px'; //移動物體 128 } 129 } 130 // 鼠標擡起 131 function Up() 132 { 133 document.onmousemove=null; 134 document.onmouseup=null; 135 //釋放捕獲 136 if(obj.releaseCapture) 137 { obj.releaseCapture(); } 138 139 } 140 return false; 141 }// onmousedown 結束 142 } 143 144 //提取非行間樣式 145 function getStyle(obj,attr) 146 { 147 if(obj.currentStyle) 148 { return obj.currentStyle[attr];} 149 else 150 { return getComputedStyle(obj,false)[attr];} 151 }
html 部分
<body> <div id="warp"><p>指定元素內拖拽</p></div> <p>測試部分</p> <div id="ele">單個退拽元素<br/>原生js<br/>添加配置選項</div> <p>測試部分</p> </body>