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 版本]
Mar 20 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
php数组遍历类与用法示例
2019/05/24 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
微信小程序实现侧边分类栏
2019/10/21 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python3去掉string中的标点符号方法
2019/01/22 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python接入支付宝的实例操作
2020/07/20 Python
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
四年级学生期末评语
2014/12/26 职场文书
未婚证明范本
2015/06/15 职场文书
毕业证明书
2015/06/19 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python