JavaScript实现简单拖拽效果


Posted in Javascript onSeptember 15, 2021

本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码,供大家参考,具体内容如下

先看实现的效果:

JavaScript实现简单拖拽效果

思路:里面用到了三个事件,鼠标按下、移动、松开事件

那么首先创建盒子并且给它赋予css样式

HTML:

// html
<div>
    <p>我是个蓝色的盒子</p>
</div>

CSS:

CSS
*{margin: 0;padding: 0;}
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
        }
        p{
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 10px;
            color: #fff;
            text-align: center;
            transition: .5s all;
        }
        p:hover{
            transform: translateY(-5px);
            transition: .5s all;
            box-shadow: 10px 10px 5px gray;
}

然后在JS设置相应的方法

var div = document.querySelector('div');
        var p   = document.querySelector('p');
        // 先定义初始化变量x、y
        var x =0;
        var y = 0;
        // var i = 3;
        var TorF= false;
        //盒子里的文字无法被选中
        div.onselectstart = function (e) {
            return false;
        }
        div.addEventListener('mousedown',function(e){
            // client:鼠标按钮时输出鼠标指针的坐标
            x = e.clientX;
            y = e.clientY;
            // 格式:obj.offsetLeft:获取左和上的偏移量
            // 在这里特别说明一下:这个属性是只读的,不能够赋值。
            // 返回当前元素距离父元素(body)左边的距离
            // 这里的l,t并不是声明了一个全局变量,而是创建了一个全局对象的属性。
            l = div.offsetLeft;
            t = div.offsetTop;
            // 鼠标设置移动箭头
            div.style.cursor =  'move';
            p.innerHTML =  '我被按下了 ^_^';
            TorF= true;
        });
        // 当整个屏幕触发移动事件时
        document.addEventListener('mousemove',function(e){
            // 如果为false则终止函数的执行并返回函数的值
            if (Torf == false) {
                return; 
            }
            // 在此函数中定义局部变量
            var twox = e.clientX;
            var twoy = e.clientY;
            // 用获取到的鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置
            // 后面一定要加上px单位,因为本身获取是没有单位的
            var twol = twox - (x-l);
            var twot = twoy - (y-t); 
            div.style.left = twol+'px';
            div.style.top = twot+'px';
            p.innerHTML =  '我正在被拖动  -.-';
        });
        div.addEventListener('mouseup',function(){
            // 松开键盘时停止鼠标移动事件
            TorF= false;
            // 鼠标恢复默认样式
            div.style.cursor = 'default';
            p.innerHTML =  '我被弹开了QAQ';
 })

注意:

1、想控制某一个盒子的位置,必须给盒子添加定位,否则盒子不会动

2、offsetLeft这个属性是只读的,不能够赋值

3、鼠标位置的的计算:鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
了解JavaScript中的选择器
May 24 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
Javascript之datagrid查询详解
Sep 15 #Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
JavaScript 数组去重详解
Sep 15 #Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 #Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 #Javascript
javascript函数式编程基础
Sep 15 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
中软Java笔试题
2012/11/11 面试题
大学辅导员事迹材料
2014/02/05 职场文书
给学校的建议书
2014/03/12 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
学生保证书格式
2015/02/27 职场文书
承诺书范本大全
2015/05/04 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers