Mxnet url gridview plugins eloquent uiviewcontroller vue样式 bootstrap后台管理系统 pmp学习视频 jq绑定click事件 python转16进制 增删改查sql语句 idea格式化代码设置 mysql将时间戳转换成日期 python教学 python链接mysql数据库 python图形界面开发 windows安装python环境 python加入环境变量 python创建文件 python的安装路径 java开发环境配置 java学习教程 java初学 java的map java怎么写接口 java查看变量类型 decimalformat js上传图片 blued是什么软件 mac画图工具 js字符转数字 js刷新当前页 斑驳纹理 pr抖动特效 js字符串比较 0x000007a 模拟邻居 grep正则表达式 苹果电脑数据恢复
当前位置: 首页 > 学习教程  > 编程语言

前端 JavaScript -- 实现元素的拖拽功能

2021/2/13 17:15:45 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

实现元素的拖拽功能&#xff0c;类似于桌面的图标&#xff0c;鼠标点击长按可以移动元素 当鼠标松开&#xff0c;元素固定到鼠标松开的位置。 <style>#box1{width: 100px;height: 100px;background-color: rebeccapurple;position: absolute;}</style> <scrip…

实现元素的拖拽功能,类似于桌面的图标,鼠标点击长按可以移动元素 当鼠标松开,元素固定到鼠标松开的位置。

<style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            position: absolute;
        }
    </style> 
<script>
        window.onload = function () {
          var box1 =  document.getElementById("box1");
          drag(box1);
        };


        /**
         * 专门用来拖拽的方法,参数为拖拽元素的ID
         */
       function drag(obj) {
            //当鼠标在被拖拽元素上按下,开始拖拽
            obj.onmousedown = function (event) {
                //设置obj捕获所有的鼠标按下事件,而不仅仅是在元素内部区域
                // obj.setCapture && obj.setCapture();
                //解决兼容性问题,实现IE8的兼容
                event = event || window.event;
                //鼠标在元素中的偏移量等于 鼠标的clientX - 元素的offsetLeft
                var ol = event.clientX - obj.offsetLeft;
                var ot = event.clientY - obj.offsetTop;


                //为document绑定一个onmousemove事件
                document.onmousemove = function (event) {
                    event = event || window.event;
                    //当鼠标移动时,被拖拽元素跟随鼠标移动
                    //获取鼠标的坐标
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;

                    //修改元素的位置 修改元素的位置只能通过 元素.style.属性 = "属性值";
                    obj.style.left = left + "px";
                    obj.style.top = top + "px";
                };
                //为document绑定一个鼠标松开事件onmouseup
                document.onmouseup = function () {
                    //当鼠标松开时,被拖拽元素固定在当前位置
                    //当鼠标松开时,取消onmousemove事件
                    document.onmousemove = null;
                    //当鼠标松开时,onmouseup事件,要不每次一松开鼠标都触发此事件
                    document.onmouseup = null;
                    //鼠标松开,取消事件的捕获
                    //obj.releaseCapture && obj.releaseCapture();
                };
                /**
                 * 当我们拖拽一个网页中的内容时,浏览器默认会使用搜索引擎去搜索拖拽的文本内容
                 * 可以通过return false取消这种行为
                 *
                 * 注:IE8 使用return false无效
                 */
                return false;
            };
       }
    </script>

<body>
<div id="box1"></div>

</body>

注: 一定要将元素的css样式的position进行设置,否则无效果 一般设置为position: absolute;

正在学习中,如果不足之处,感谢各位指正


本文链接: http://www.dtmao.cc/news_show_700102.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?