Question

怎么用 javascript 实现拖拽

Answer 1

　　javascript 实现拖拽实现原理。如下：

　　用JavaScript事件方法表示就是：

　　① onmousedown + onmousemove → startDrag()
        ② onmouseup → stopDrag()

1.首先调用js文件，如下：

<script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>

2.然后使用startDrag()方法绑定拖拽效果，startDrag()方法有两个参数，第一个是点击的对象（即点击那里可以实现拖拽，例如弹出层的标题栏），第二个是拖拽的对象（例如一个弹出层）。也就是startDrag(触发拖拽对象，被拖拽对象)。

<style type="text/css">
#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
</style>

<div id="box">
   <div id="main">
       <div id="bar">拖拽</div>
       <div id="content">
           内容……
       </div>
   </div>
</div>

JS部分
<script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
   var oBox = document.getElementById("box");
   var oBar = document.getElementById("bar");
   startDrag(oBar, oBox);
</script>

Answer 2

看下面的代码，兼容手机和PC，就10多行代码

<style>    
* {    
margin: 0;    
padding: 0    
}    
#user_cover {    
position: fixed;    
top: 40%;    
right: 0;    
width: 4rem;    
height: 4rem;    
background-color: rgba(0, 0, 0, 0.3);    
}    
</style>    
<div id="user_cover"></div>    
<script>    
function onTouchMove(point) {    
document.getElementById('user_cover').style.top = (point.changedTouches[0].clientY) + "px";    
document.getElementById('user_cover').style.left = (point.changedTouches[0].clientX) + "px";    
}    
function onMouseDown(point) {    
document.onmousemove = function (event) {    
document.getElementById('user_cover').style.top = event.clientY+"px";    
document.getElementById('user_cover').style.left = event.clientX+"px";    
console.log(point);    
console.log(event);    
};    
document.onmouseup = function () {    
document.onmousemove = null;    
document.onmouseup = null;    
};    
}    
document.getElementById('user_cover').addEventListener('touchmove', onTouchMove, false);    
document.getElementById('user_cover').addEventListener('mousedown', onMouseDown, false);    
</script>

Answer 3

在DOM上绑定事件 一共三个
onmousedown
onmousemove
onmouseup

DOM.on({
onmousedown:function(e){},
onmousemove:function(){},
onmouseup:function(){e},
})

然后再在里面写样式 写功能
onmousedown:function(){} //这边主要是记录 target 的属性

onmousemove:function(){} // 这边主要是 写 DOM跟随

onmouseup:function(){} // 这里主要是写 鼠标放开时候 重新记录 DOM的位置