拖放

最新推荐文章于 2024-05-20 15:25:36 发布

天下1281

最新推荐文章于 2024-05-20 15:25:36 发布

阅读量116

点赞数

分类专栏：原生js 文章标签：拖放

本文链接：https://blog.csdn.net/boysky0015/article/details/94906214

版权

原生js 专栏收录该内容

165 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<style>
    .draggable{
        width: 100px;
        height: 100px;
        position: absolute;
        background: blue;
    }
</style>
</head>
<body>
    <div id='root' class='draggable'>
       
    </div>
    <script>
        var root = document.getElementById('root');
        //使用此对象处理浏览器的差异性
        var EventUtil = {
            addHandler: function(element,type,handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);
                }else {
                    element['on'+type] = handler;
                }
            },
            getEvent: function(event){
                return event ? event: window.event;
            },
            getTarget: function(event){
                return event.target || event.srcElement;
            },
            removeHandler: function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }else if(element.detachEvent){
                    element.detachEvent('on'+type,handler);
                }else {
                    element['on'+type] = null;
                }
            }
        }
        //拖放
        // EventUtil.addHandler(document,'mousemove',function(event){
        //     var root = document.getElementById('root');
        //     root.style.left = event.clientX + 'px';
        //     root.style.top = event.clientY + 'px';
        // })

        EventUtil.addHandler(document,'mousedown',function(){
            DragDrop.enable();
        });

        var DragDrop = function(){
            var dragging = null;
            function handleEvent(event){
                //获取事件和目标
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                //确定事件类型
                console.log('event.type',event.type);
                switch(event.type){
                    case 'mousedown':
                        if(target.className.indexOf('draggable')>-1){
                            dragging = target;
                        }
                        break;
                    case 'mousemove':
                        if(dragging !== null){
                            dragging.style.left = event.clientX + 'px';
                            dragging.style.top = event.clientY + 'px';
                        }
                        break;
                    case 'mouseup':
                        dragging = null;
                        break;
                }
            }
            //公共接口
            return {
                enable: function(){
                    EventUtil.addHandler(document,'mousedown',handleEvent);
                    EventUtil.addHandler(document,'mousemove',handleEvent);
                    EventUtil.addHandler(document,'mouseup',handleEvent);
                },
                disable: function(){
                    EventUtil.removeHandler(document,'mousedown',handleEvent);
                    EventUtil.removeHandler(document,'mousemove',handleEvent);
                    EventUtil.removeHandler(document,'mouseup',handleEvent);
                }
            }
        }()

    </script>
</body>
</html>