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、鼠标位置的的计算:鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-09-12

JS组件Bootstrap Table表格行拖拽效果实现代码

一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

使用javaScript实现鼠标拖拽事件

本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

JavaScript实现水平进度条拖拽效果

本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

js实现拖拽效果

首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

使用js实现的简单拖拽效果

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <ti

javascript实现移动端上的触屏拖拽功能

本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

JS实现的文件拖拽上传功能示例

本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS文件拖拽上传</title> <style> div{ width: 300px; height: 300px; border:1px dashed #000; position:

JQuery Dialog(JS 模态窗口,可拖拽的DIV)

效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

Sortable.js拖拽排序使用方法解析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

JS拖拽排序插件Sortable.js用法实例分析

本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js,再然后就有了这篇文章. 特点: 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持单个列表容器内部拖拽排序,也支持两个列表容器互相拖拽排序 支持拖放操作和可选择的文本 非常友善的滚动

移动端JS实现拖拽两种方法解析

移动端的项目经常会引入手势库来实现拖拽 不过如果只是一两个页面用到拖拽,再引入一个手势库就很不划算 最近的项目中就有这么一个需求: 因为就这一个地方需要拖拽,所以我就没有引入第三方库 移动端的拖拽有两种主流的实现方案: 1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果: 2. 使用 transform 中的平移translate 属性实现拖拽. 方案一:固定定位 fixed 这种方案的核心就是给元素添加固定定位position:fixed; 但定位之后,元素会脱离文档流,会

如何实现js拖拽效果及原理解析

元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离(移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置).然后松开鼠标时,删除移动事件和松开事件,元素完成拖拽. 一开始先监听鼠标按下事件mousedown,事件触发执行mouseHandler函数: div.addEventListener("mousedown",mo

js拖拽功能实现代码解析

本文解决的问题: 1.怎样在网页中实现拖曳功能: 2.document.documentElement与document.body的区别. document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度.这两者是不一样的.可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试. 3.getBou

React.js组件实现拖拽排序组件功能过程解析

因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

通过jquery-ui中的sortable来实现拖拽排序的简单实例

1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s

jquery拖拽排序简单实现方法(效果增强版)

本文实例讲述了jquery拖拽排序简单实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title

js拖拽一些常见的思路方法整理

js拖拽的常见思路 1.通过onmousedown,onmousemove,onmouseup分别模拟开始拖拽,拖拽中和拖拽结束时的事件(). 如果手机的触摸事件的话则分别是ontouchstart,ontouchmove和ontouchend. 2.鼠标按下即发生onmousedown事件时:获取鼠标位置,获取被拖动元素的位置,记录两者之间的纵横坐标的差值().对document元素绑定onmousemove,onmouseup事件. 刚开始接触js拖拽时,我当时疑惑的是为什么是对docume

vue拖拽排序插件vuedraggable使用方法详解

大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr