点击下面 目录标题 在线预览效果
网页 head 部分
[/span>meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
公共 js 部分
//提取非行间样式
function getStyle(obj,attr)
{
if(obj.currentStyle)
{ return obj.currentStyle【attr】;}
else
{ return getComputedStyle(obj,false)【attr】;}
}
addEventListener 函数中 {passive: false} 参数说明：
Passive Event Listeners就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表函数（该监听器）内部不会调用 preventDefault 函数来阻止默认滑动行为；passive 的值为 false ，代表函数内部调用 preventDefault 函数来阻止默认滑动行为，代表函数内部调用 ，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持 mousewheel/touch 相关事件。
手机端这里 touchStartEvent 函数中的对象使用 obj , 没有拖拽过快，obj 跟不上的问题。
移动端单个退拽元素
css 部分
body{Height＜/span>:2000px;}
.test{margin:150px; }
#ele{Width＜/span>:150px; Height＜/span>:150px;cursor: move;position: fixed;top:50px;color:#fff;box-sizing: border-box;z-index: 10;background:#2196f3;left:10px; font-size: 16px}
js 部分
window.onload=function(ev){
// 获取元素
var Div=document.getElementById('ele');
// 开始拖拽
drag(Div,{passive: false});
}
1 // 拖拽运动
2 function drag(obj,passive){
3
4 var lastX=0;
5 var lastY=0;
6
7 obj.addEventListener('touchstart',touchStartEvent,passive);
8 // ev 为系统自带参数
9 function touchStartEvent(ev)
10 {
11 var Ev=ev||event; // FF || IE
12 var touch = Ev.targetTouches【0】;
13 var disX=touch.clientX-parseInt(getStyle(obj,'left'));
14 var disY=touch.clientY-parseInt(getStyle(obj,'top'));
15
16 //释放捕获,把鼠标事件 捕获到 当前文档指定的对象 针对IE
17 if(obj.setCapture)
18 {
19 obj.addEventListener('touchmove',touchMoveEvent,passive);
20 obj.addEventListener('touchend',touchEndEvent,passive);
21 obj.setCapture();
22 }
23 else
24 {
25 // 手机端这里使用obj ,没有拖拽过快，obj 跟不上的问题
26 obj.addEventListener('touchmove',touchMoveEvent,passive);
27 obj.addEventListener('touchend',touchEndEvent,passive);
28 }
29 // 鼠标移动,函数上的 ev 参数是系统传过来的
30 function touchMoveEvent(ev)
31 {
32 var Ev=ev||event; // FF || IE
33 var touch = Ev.targetTouches【0】;
34 var l=touch.clientX-disX;
35 var t=touch.clientY-disY;
36
37
38 if(l>=document.documentElement.clientWidth-parseInt(getStyle(obj,'width')))
39 {
40 l=document.documentElement.clientWidth-parseInt(getStyle(obj,'width'));
41 }
42 else if(l<=0)
43 { l=0; }
44
45 if(t>=document.documentElement.clientHeight-parseInt(getStyle(obj,'height')))
46 {
47 t=document.documentElement.clientHeight-parseInt(getStyle(obj,'height'));
48 }
49 else if(t<=0)
50 { t=0; }
51
52 lastX=l;
53 lastY=t; // 当前的点赋给一个变量（上一个点）
54 obj.style.left=l+'px';
55 obj.style.top=t+'px'; //移动物体
56 }
57 // 鼠标抬起
58 function touchEndEvent()
59 {
60 obj.removeEventListener('touchmove',touchMoveEvent,passive);
61 obj.removeEventListener('touchend',touchEndEvent,passive);
62 if(obj.releaseCapture)
63 { obj.releaseCapture(); }
64
65 }
66 // 拖拽元素时，阻止页面跟随滚动问题
67 // 由于 {passive: false} ，如果不阻止默认事件，chrome 浏览器会有警告
68 Ev.preventDefault();
69 return false;
70 }
71 }
72
73 //提取非行间样式
74 function getStyle(obj,attr)
75 {
76 if(obj.currentStyle)
77 { return obj.currentStyle【attr】;}
78 else
79 { return getComputedStyle(obj,false)【attr】;}
80 }
View Code
html 部分
[/span>div id="ele"br/>原生js[/span>br/>不跟随页面滚动
[/span>p class="test"
[/span>p class="test"
[/span>p class="test"
移动端多个拖拽元素
css 部分
body{Height＜/span>:1500px;}
*{margin:0px;padding:0px;}
.test{margin:200px; }
#ele1,#ele2,#ele3{Width＜/span>:100px; Height＜/span>:100px;cursor: move;position: fixed;top:50px;color:#fff;box-sizing: border-box;z-index: 10;font-size: 14px}
#ele1{background:#2196f3;top:40px; }
#ele2{background:#ff5722;top:160px;}
#ele3{background:#08c80f;top:270px; }
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'))
//代码效果参考：http://www.zidongmutanji.com/bxxx/415102.html
// 调用拖拽函数drag(ele1,{passive: false});
drag(ele2,{passive: false});
drag(ele3,{passive: false});
}
1 // 拖拽运动
2 function drag(obj,passive){
3
4 var lastX=0;
5 var lastY=0;
6
7 obj.addEventListener('touchstart',touchStartEvent,passive);
8
9 function touchStartEvent(ev)
10 {
11 var Ev=ev||event; // FF || IE
12 var touch = Ev.targetTouches【0】;
13 var disX=touch.clientX-parseInt(getStyle(obj,'left'));
14 var disY=touch.clientY-parseInt(getStyle(obj,'top'));
15 // 层级问题,最后拖拽的在最上面，由于 zIndex 最大值是一个非常大的数，所以这里没有限制处理
16 obj.style.zIndex=window.layer=window.layer+1
17
18 //释放捕获,把鼠标事件 捕获到 当前文档指定的对象 针对IE
19 if(obj.setCapture)
20 {
21 obj.addEventListener('touchmove',touchMoveEvent,passive);
22 //代码效果参考：http://www.zidongmutanji.com/bxxx/585284.html
obj.addEventListener('touchend',touchEndEvent,passive);23 obj.setCapture();
24 }
25 else
26 {
27 obj.addEventListener('touchmove',touchMoveEvent,passive);
28 obj.addEventListener('touchend',touchEndEvent,passive);
29 }
30 // 鼠标移动,函数上的 ev 参数是系统传过来的
31 function touchMoveEvent(ev)
32 {
33 var Ev=ev||event; // FF || IE
34 var touch = Ev.targetTouches【0】;
35 var l=touch.clientX-disX;
36 var t=touch.clientY-disY;
37
38 if(l>=document.documentElement.clientWidth-parseInt(getStyle(obj,'width')))
39 {
40 l=document.documentElement.clientWidth-parseInt(getStyle(obj,'width'));
41 }
42 else if(l<=0)
43 { l=0; }
44
45 if(t>=document.documentElement.clientHeight-parseInt(getStyle(obj,'height')))
46 {
47 t=document.documentElement.clientHeight-parseInt(getStyle(obj,'height'));
48 }
49 else <
