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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
jstree的简单实例
Dec 01 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
layui树形菜单动态遍历的例子
Sep 23 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
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
php搜索文件程序分享
2015/10/30 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
值得收藏的10道python 面试题
2019/04/15 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
大一新生学期自我评价
2014/04/09 职场文书
学习雷锋标语
2014/06/25 职场文书
初中同学会活动方案
2014/08/22 职场文书
酒店厨房管理制度
2015/08/06 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang