SoftHub关联区 - [js]js 拖放（拖动） div 的第三种方法

您的位置：首页 >> SoftHub关联区 >> 主题: [js]js 拖放（拖动） div 的第三种方法 [回主站] [分站链接]

您的位置：首页 >> SoftHub关联区 >> 主题: [js]js 拖放（拖动） div 的第三种方法 [最新] [回主站]

[js]js 拖放（拖动） div 的第三种方法

clq

浏览(568) - 2020-01-08 19:56:49 发表编辑

关键字: javascript

[2020-01-08 19:59:51 最后更新]
[js]js 拖放（拖动） div 的第三种方法

似乎要比第二种方法更完善，不过也更难理解点。
不过本质算法其实是一样的。
--------------------------------------------------------
div拖拽时取消文字选中默认事件的解决方法
原创燕过留誉发布于2015-08-27 15:00:22 阅读数 6695 收藏
展开

当我们对div进行拖拽时，会发现把div里的文字也选中了，其实我并不想选中文字，怎么解决呢？

我们分两种情况说，一种情况是直接给对象加事件如obj.onmousedown；另外一种是为对象绑定事件addEventListener。

先说第一种：比较简单，高版本的浏览直接加return false来阻止默认事件，低版本的IE系列则用obj.capature&&obj.capature();

第二，在事件绑定以后，return false 不起作用了。这时我们需要使用oEvent.preventDefault()来解决。低版本IE还是一样。

顺便提一句：事件绑定attachEvent中，不能使用this

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #div{ position:absolute; width:200px; height:200px; background:#ccc; color:#000}
    </style>
    <script>
    ready(function(){
        var oDiv=document.getElementById('div');
        drag(oDiv);
    })

    //拖拽原理：改变obj的top值与left值
    function drag(obj)
    {
        addEvent(obj,'mousedown',function(ev){
            var oEvent=ev||event;
            //不变的参考距离＝mousedown时鼠标坐标－obj到页面的左边距
            var disX=oEvent.clientX-obj.offsetLeft;
            var disY=oEvent.clientY-obj.offsetTop;
            addEvent(document,'mousemove',move);
            addEvent(document,'mouseup',up);
            oEvent.preventDefault();//阻止默认事件，取消文字选中
            function move(ev)
            {
                var oEvent=ev||event;
                var left=oEvent.clientX-disX;
                var top=oEvent.clientY-disY;
                obj.style.left=left+'px';
                obj.style.top=top+'px';
                obj.setCapture&&obj.setCapture();//低版本IE阻止默认事件，取消文字选中
            }
            function up()
            {
                removeEvent(document,'mousemove',move);
                removeEvent(document,'mouseup',up);
                obj.releaseCapture&&obj.releaseCapture();//低版本IE取消阻止默认事件
            }
        })
    }
    //添加事件绑定
    function addEvent(obj,sEv,fn)
    {
        if(obj.addEventListener)
        {
            obj.addEventListener(sEv,fn,false);
        }else{
            obj.attachEvent('on'+sEv,fn);
        }
    }

    //删除事件绑定
    function removeEvent(obj,sEv,fnName)
    {
        if(obj.removeEventListener)
        {
            obj.removeEventListener(sEv,fnName,false);
        }else{
            obj.detachEvent('on'+sEv,fnName);
        }
    }
    //代码加载完执行js
    function ready(fn)
    {
        if(document.addEventListener)
        {
            document.addEventListener('DOMContentLoaded',fn,false)
        }else{
            document.attachEvent('onreadystatechange',function(){
                if(document.readyState=='complete')
                {fn();}
            })
        }
    }
    </script>
    </head>

    <body>
    <div id="div">选不中我哦，选不中我的。</div>
    </body>
    </html>

    点赞 1
    收藏
    分享

燕过留誉
发布了19 篇原创文章 · 获赞 24 · 访问量 6万+
私信
关注

    zpfz756
    I'm 左撇峰子8个月前#1楼css里添加user-select: none;即可解决。
————————————————
版权声明：本文为CSDN博主「燕过留誉」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/swallowliyan/article/details/48026649

总数：0　页次：1/0　首页尾页　　

所在合集/目录

js拖动div 更多

发表评论:

本帖子属于以下条目(javascript)

[js]javascript 常用代码收集

[专题][javascript]js下拉菜单

[专题][javascript]js拖动div

[网站]js 中可调用的 api 权威说明 -- firefox 官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.