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 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
js实现飞机大战游戏
Aug 26 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python实现简单坦克大战
2020/03/27 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Python基于locals返回作用域字典
2020/10/17 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
采购员岗位职责
2013/11/15 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
活动倡议书范文
2014/05/13 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL