javascript鼠标事件-tutorial js-php.cn

Rumah

tutorial js

javascript鼠标事件

Dec 06, 2016 am 11:28 AM

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;简单拖拽实现&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
*{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;}
&lt;/style&gt; 
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;box&quot;&gt;
        &lt;div id=&quot;dragBox&quot;&gt;拖我&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var VVG = {};  //命名空间
VVG.DOM = {
    $: function(id) { //创建方便的选择符
        return typeof id == &quot;string&quot; ? document.getElementById(id) : id;
    },
    bindEvent: function(node, type, func) { //事件绑定方法
        if (node.addEventListener) {
            node.addEventListener(type, func, false);
        } else if (node.attachEvent) {
            node.attachEvent(&quot;on&quot; + type, func);
        } else {
            node[&quot;on&quot; + 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.$(&quot;box&quot;); //获取外围BOX
        var dragBox = VVG.DOM.$(&quot;dragBox&quot;);//获取需要拖动的BOX
        var dragging = null; //初始化对象
        function drag(event) { //事件执行函数
            event = VVG.DOM.getEvent(event); 
            var target = VVG.DOM.getTarget(event);
            switch (event.type) {//判断事件类型
            case &quot;mousedown&quot;:
                if(target.id == &quot;dragBox&quot;){ //当事件对象的ID等于要拖动的BOX的ID时
                    dragging = target; //赋值到拖动目标
                }
                break;
            case &quot;mousemove&quot;:
                if(dragging){ //当有拖动目标时执行
                    sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度
                    dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + &quot;px&quot;;
                    dragging.style.top = (event.clientY + sTop - box.offsetTop  - dragBox.offsetHeight/2 ) + &quot;px&quot;;
                    var left = parseInt(dragging.style.left);
                    var top = parseInt(dragging.style.top);
                    //console.log(&quot;left:&quot;+left+&quot;-----top:&quot;+top + &quot;-------sTop:&quot;+sTop);
                    // 比较坐标是否超出外围的BOX
                    if(left &lt; 0){
                        dragging.style.left = 0 +&quot;px&quot;;
                    }
                    if(top &lt; 0){
                        dragging.style.top = 0+&quot;px&quot;;
                    }
                    if(left &gt; box.offsetWidth - dragBox.offsetWidth){
                        dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+&quot;px&quot;;
                    }
                    if(top &gt;  box.offsetHeight - dragBox.offsetHeight){
                        dragging.style.top =( box.offsetHeight - dragBox.offsetHeight  - 2 )+&quot;px&quot;;
                    }
                }
                break;
            case &quot;mouseup&quot;:
                // 清空拖动目标
                dragging = null;
                break;
            }
        };
        return {
            dragStart: function() {
                // 绑定事件
                VVG.DOM.bindEvent(document, &quot;mousedown&quot;, drag);
                VVG.DOM.bindEvent(document, &quot;mousemove&quot;, drag);
                VVG.DOM.bindEvent(document, &quot;mouseup&quot;, drag);
            }
        }
    }();
    DragDrop.dragStart();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Kenyataan Laman Web ini

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