cari

Rumah >hujung hadapan web >tutorial js >javascript简单拖拽鼠标事件mousedown和mousemove以及mouseup实例分析

javascript简单拖拽鼠标事件mousedown和mousemove以及mouseup实例分析

黄舟
黄舟asal
2017-06-28 10:33:473532semak imbas

javascript简单拖拽

简单拖拽实现

1623.png

mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。

简单拖拽实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖拽实现</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; }
#dragBox{ width:50px; height:50px;  text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;}
</style> 
</head>
<body>
<div id="box">
        <div id="dragBox">拖我</div>
</div>
<script type="text/javascript">
var VVG = {};  //命名空间
VVG.DOM = {
    $: function(id) { //创建方便的选择符
        return typeof id == "string" ? document.getElementById(id) : id;
    },
    bindEvent: function(node, type, func) { //事件绑定方法
        if (node.addEventListener) {
            node.addEventListener(type, func, false);
        } else if (node.attachEvent) {
            node.attachEvent("on" + type, func);
        } else {
            node["on" + type] = func;
        }
    },
    getEvent: function(event) { //获取事件
        return event ? event : window.event;
    },
    getTarget: function(event) { //获取事件目标
        return event.target || event.srcElement;
    }
}
    var DragDrop =  function() { //新建一个返回对象的函数
        var box = VVG.DOM.$("box"); //获取外围BOX
        var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX
        var dragging = null; //初始化对象
        function drag(event) { //事件执行函数
            event = VVG.DOM.getEvent(event); 
            var target = VVG.DOM.getTarget(event);
            switch (event.type) {//判断事件类型
            case "mousedown":
                if(target.id == "dragBox"){ //当事件对象的ID等于要拖动的BOX的ID时
                    dragging = target; //赋值到拖动目标
                }
                break;
            case "mousemove":
                if(dragging){ //当有拖动目标时执行
                    sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度
                    dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px";
                    dragging.style.top = (event.clientY + sTop - box.offsetTop  - dragBox.offsetHeight/2 ) + "px";
                    var left = parseInt(dragging.style.left);
                    var top = parseInt(dragging.style.top);
                    //console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop);
                    // 比较坐标是否超出外围的BOX
                    if(left < 0){
                        dragging.style.left = 0 +"px";
                    }
                    if(top < 0){
                        dragging.style.top = 0+"px";
                    }
                    if(left > box.offsetWidth - dragBox.offsetWidth){
                        dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px";
                    }
                    if(top >  box.offsetHeight - dragBox.offsetHeight){
                        dragging.style.top =( box.offsetHeight - dragBox.offsetHeight  - 2 )+"px";
                    }
                }
                break;
            case "mouseup":
                // 清空拖动目标
                dragging = null;
                break;
            }
        };
        return {
            dragStart: function() {
                // 绑定事件
                VVG.DOM.bindEvent(document, "mousedown", drag);
                VVG.DOM.bindEvent(document, "mousemove", drag);
                VVG.DOM.bindEvent(document, "mouseup", drag);
            }
        }
    }();
    DragDrop.dragStart();
</script>
</body>
</html>


Atas ialah kandungan terperinci javascript简单拖拽鼠标事件mousedown和mousemove以及mouseup实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery中关于title属性导致触发mousedown事件时连带触发mousemove事件详解Artikel seterusnya：jquery如何实现拖拽时每次mousemove的时候都有一个向左跳动？

Artikel berkaitan

Lihat lagi