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 设置标题的自动翻转
Oct 03 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
从零开始学习搭建React脚手架项目
Aug 23 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python支持多线程的爬虫实例
2019/12/21 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
校园达人秀策划书
2014/01/12 职场文书
先进集体申报材料
2014/12/25 职场文书
初中中等生评语
2014/12/29 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
MySQL 服务和数据库管理
2021/11/11 MySQL