javascript实现简单拖曳功能

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

场景：想必大家对这一类场景很熟悉，QQ登陆面板跟着鼠标的拖动，鼠标到哪它到哪，飞机大战小游戏里，鼠标或者手指到哪，飞机到哪，这一类场景用的很多，那么下面来简单实现一下：

思路：

在鼠标移动的时候，计算鼠标位置

给盒子一个绝对定位，将鼠标位置赋值给盒子

HTML 结构


<html>
<head>
<meta charset="utf-8">
<title>title> 
head>
<body>
    <div id="drag">想看效果？狠狠的拽我！！div>
body>
html>

CSS 样式

#drag{
    width: 200px;
    height: 200px;
    background: yellow;
    color: red;
    font-size: 20px;
    font-weight: bold;
    position: absolute;/*这很关键*/
    left: 40%;
    top: 37%;
}
#drag:active{
    cursor: move;
}

这时候就有了个黄底红字的大盒子，用 JS 去编写鼠标按下，鼠标移动，鼠标抬起的事件驱动程序，实现拖曳效果

思路：将鼠标所在位置直接赋值给盒子的绝对定位的位置left和top

var oDrag = document.getElementById("drag")
getDarg(oDrag)
function getDarg(obj){
    //鼠标按下 
    obj.onmousedown = function(e){
        //鼠标移动
    　　document.onmousemove = function(e){
    　　　　var event = e || event
    　　　　obj.style.left = event.clientX + 'px'
    　　　　obj.style.top = event.clientY + 'px' 
    　　}
        //鼠标放开
    　　document.onmouseup = function(){
    　　    // 鼠标抬起的时候清空事件，有效避免内存泄漏
    　　　　document.onmousemove = null
    　　　　document.onmouseup = null
    　　}
    }  
}

这样实现了拖曳效果，但是很显然，这样鼠标拖曳按钮一直在黄盒子的左上角，体验很不好，那么就要合理的计算鼠标在盒子中的位置，鼠标在盒子中的位置计算可以用鼠标在可视区域的位置减去盒子绝对定位的位置

var oDrag = document.getElementById("drag")
getDarg(oDrag)
function getDarg(obj){
    //鼠标按下 
    obj.onmousedown = function(e){

        // 兼容性处理
    　　var event = e || event

        // 鼠标在盒子中的位置
    　　var distanceX = event.clientX - this.offsetLeft
    　　var distanceY = event.clientY - this.offsetTop

        //鼠标移动
    　　document.onmousemove = function(e){
    　　　　... 
    　　}
        //鼠标放开
    　　document.onmouseup = function(){
    　　　　...
    　　}
    }  
}

这样就基本实现了需求，但是拖动的时候会不注意选中盒子上的文字，也影响用户体验，借助window和document下面的方法在拖曳盒子即移动鼠标的时候取消文本选中

1	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

这样就好多了

下面上完整代码：


<html>
<head>
<meta charset="utf-8">
<title>title> 
<script type="text/javascript" src='./js/jquery-1.8.3.min.js'>script> 
<style type="text/css">
#drag{
    width: 200px;
    height: 200px;
    background: yellow;
    color: red;
    font-size: 20px;
    font-weight: bold;
    position: absolute;/*这很关键*/
    left: 40%;
    top:37%;
}
#drag:active{
    cursor: move;
}
style>
head>
<body>

<div id="drag">想看效果？狠狠的拽我！！div>

<script type="text/javascript">
var oDrag = document.getElementById("drag")
getDarg(oDrag)
function getDarg(obj){
    //鼠标按下 
    obj.onmousedown = function(e){

        // 兼容性处理
    　　var event = e || event

        // 鼠标在盒子中的位置
    　　var distanceX = event.clientX - this.offsetLeft
    　　var distanceY = event.clientY - this.offsetTop

        //鼠标移动
    　　document.onmousemove = function(e){
    　　　　var event = e || event
        
           // 着鼠标的拖曳移动
    　　　　obj.style.left = event.clientX - distanceX + 'px'
    　　　　obj.style.top = event.clientY - distanceY + 'px' 

            // 取消文本选中
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    　　}
        //鼠标放开
    　　document.onmouseup = function(){

            // 鼠标抬起的时候清空事件，有效避免内存泄漏
    　　　　document.onmousemove = null
    　　　　document.onmouseup = null
    　　}
    }  
}
script>
body>
html>

至此，简单拖曳功能完成，对应的如果开发移动端，只需要改上移动端的事件即可，例如touchstart ,touchmove,touchend, touchcancel等

javascript实现简单拖曳功能

javascript实现简单拖曳功能

你可能感兴趣的:(javascript实现简单拖曳功能)