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的inputlimiter 实现字数限制功能
May 30 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
一小时迅速入门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
PHP 登录记住密码实现思路
2013/05/07 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
基于python指定包的安装路径方法
2018/10/27 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
提高python代码运行效率的一些建议
2020/09/29 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
白酒市场营销方案
2014/02/25 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle