自定义事件拖拽组件

Posted loewe0202

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义事件拖拽组件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义事件拖拽组件</title>
<style>
    #div1{
        width:100px;
        height:100px;
        background:red;
        position:absolute;
    }
    #div2 {
        width:100px;
        height:100px;
        background:yellow;
        position:absolute;
        left:100px;
    }
    #div3 {
        width:100px;
        height:100px;
        background:blue;
        position:absolute;
        left:200px;
    }
    #div4{
        width:100px;
        height:100px;
        background:green;
        position:absolute;
        left:300px;
    }
</style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
<script>
    //组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 )
    window.onload = function(){
        var d1 = new Drag();
        d1.init({    //配置参数
            id: ‘div1‘
        });

        var d2 = new Drag();
        d2.init({   //配置参数
            id: ‘div2‘
        });
        bindEvent(d2, ‘toDown‘, function(){
            document.title = ‘hello‘;
        });
        bindEvent(d2, ‘toDown‘, function(){
            document.body.style.background = ‘black‘;
        });

        var d3 = new Drag();
        d3.init({    //配置参数
            id: ‘div3‘
        });

        bindEvent(d3, ‘toDown‘, function(){
            document.title = ‘toDown‘;
        });

        bindEvent(d3, ‘toMove‘, function(){
            document.title = ‘toMove‘;
        });
        bindEvent(d3, ‘toUp‘, function(){
            document.title = ‘toUp‘;
        });

        var d4 = new Drag();
        d4.init({    //配置参数
            id: ‘div4‘
        });
        bindEvent(d4, ‘toUp‘, function(){
            document.title = ‘byebye‘;
        });
    };

    function Drag(){
        this.obj = null;
        this.disX = 0;
        this.disY = 0;
        this.settings = {   //默认参数

        };
    };

    Drag.prototype.init = function(opt){
        var This = this;
        this.obj = document.getElementById(opt.id);
        extend( this.settings, opt);
        this.obj.onmousedown = function(ev) {
            var ev = ev || window.event;
            This.fnDown(ev);
            fireEvent(This , ‘toDown‘);
            document.onmousemove = function(ev) {
                var ev = ev || window.event;
                This.fnMove(ev);
                fireEvent(This, "toMove");
            };
            document.onmouseup = function(ev) {
                var ev = ev || window.event;
                This.fnUp();
                fireEvent(This, ‘toUp‘);
            };
            return false;
        };
    };

    Drag.prototype.fnDown = function(ev){
        this.disX = ev.clientX - this.obj.offsetLeft;
        this.disY = ev.clientY - this.obj.offsetTop;
    };

    Drag.prototype.fnMove = function(ev){
        this.obj.style.left = ev.clientX - this.disX + ‘px‘;
        this.obj.style.top = ev.clientY - this.disY + ‘px‘;
    };

    Drag.prototype.fnUp = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    };

    function bindEvent(obj, events, fn){
        obj.listeners = obj.listeners || {};
        obj.listeners[events] = obj.listeners[events] || [];
        obj.listeners[events].push(fn);
        if(obj.nodeType){
            if(obj.addEventListener){
                obj.addEventListener(events, fn, false);
            }
            else{
                obj.attachEvent(‘on‘ + events, fn);
            }
        }
    };

    function fireEvent(obj,events){   //主动触发自定义事件
        if(obj.listeners && obj.listeners[events]){
            for(var i in obj.listeners[events]){
                 obj.listeners[events][i]();
            }
        }
    };

    function extend(child, partent) {
        var child = child || {};
        for(var i in partent) {
            if(typeof partent[i] === "object") {
                child[i] = (partent[i].constructor == Array) ? [] : {};
                extend(child[i], partent[i]);
            }else {
                child[i] = partent[i];
            }
        }
    };

    /*---------------------------
        功能:停止事件冒泡
        ---------------------------*/
    function stopBubble(e) {
        //如果提供了事件对象，则这是一个非IE浏览器
        if ( e && e.stopPropagation )
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        else
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
    };

    //阻止浏览器的默认行为
    function stopDefault(e) {
        //阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault )
            e.preventDefault();
        //IE中阻止函数器默认动作的方式
        else
            window.event.returnValue = false;
        return false;
    };
</script>
</html>

 

以上是关于自定义事件拖拽组件的主要内容，如果未能解决你的问题，请参考以下文章

可视化拖拽组件库一些技术要点原理分析

使用动态组件和自定义事件时的 VueJS 警告

可视化拖拽组件库一些技术要点原理分析

可视化拖拽组件库一些技术要点原理分析

H5拖拽事件-- 自定义创建a标签热区

Reactreact概述组件事件