<!DOCTYPE html>

<html lang="en">

    <head>    

        <meta charset="UTF-8">    

        <meta name="viewport" content="width=device-width, initial-scale=1.0">    

        <title>Document</title>

    </head>

    <body>    

        <!-- <img id="ball" src="https://js.cx/clipart/ball.svg" width = "100px" height = "100px" alt="">

        <object data="https://js.cx/clipart/ball.svg" width="100" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/imstall/" /> -->

        <img id="ball" src = "https://www.baidu.com/img/bd_logo1.png?qua=high&where=super" alt = "logo">    

        <div>helloworld</div>

        <script>       

            const ball=document.querySelector("#ball")       

            ball.onmousedown = function(event) {       

                let shiftX = event.clientX - ball.getBoundingClientRect().left;       

                let shiftY = event.clientY - ball.getBoundingClientRect().top;        

                ball.style.position = 'absolute';        

                ball.style.zIndex = 1000;        

                document.body.append(ball);        

                moveAt(event.pageX, event.pageY);        

                // 移动现在位于坐标 (pageX, pageY) 上的球        

                // 将初始的偏移考虑在内        

                function moveAt(pageX, pageY) {        

                    ball.style.left = pageX - shiftX + 'px';        

                    ball.style.top = pageY - shiftY + 'px';        

                }        

                function onMouseMove(event) {        

                    moveAt(event.pageX, event.pageY);        

                }        

                // 在 mousemove 事件上移动球        

                document.addEventListener('mousemove', onMouseMove);        

                // 放下球，并移除不需要的处理程序        

                ball.onmouseup = function() {        

                    document.removeEventListener('mousemove', onMouseMove);        

                    ball.onmouseup = null;        

                    };        

                };        

                ball.ondragstart = function() {        

                    return false;    

                };    

        </script>

    </body>

</html>

【JS】原生实现拖拽的更多相关文章

  1. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  4. 好玩的原生js的简单拖拽

    这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...

  5. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  6. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. js仿QQ拖拽删除

    原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...

  8. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  9. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  10. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

随机推荐

  1. c++学习笔记5（函数的缺省参数）

    例: void func(int x1,int x2=2,int x3=3){} func (10)//等效于func (10,2,3) func (10,8)//等效于func (10,8,3) f ...

  2. XenServer删除ISO存储！

    1.用命令 df -hal 可以看到 ISO库是使用了10G的硬盘的 2.下面开始直接右键删除ISO,但看到资源还是占用着10G的 3.如果想把这10G的硬盘资源空出来的话,只要复制前面查找到挂载的路 ...

  3. 跟着老猫来搞GO-内建容器Map

    前期回顾 在上面的文章中,老猫和大家分享了GO语言中比较重要的两种数据结构,一种是数组,另外一种是基于数组的slice.本篇文章想要继续和大家分享剩下的容器以及字符字符串的处理. MAP map的定义 ...

  4. 群晖ping自动关机

    因为学校宿舍环境的原因,每天早上10点左右宿管可能会来检查内务情况,然后一定会关闭电闸,就导致如果我的nas在10点半时开机的话用的是UPS的电源,直接导致UPS电量耗竭,而我又不可能一直去观察宿舍有 ...

  5. [APIO2020]有趣的旅途

    注意到第一个点是可以钦定的. 那么我们考虑在重心的子树里反复横跳. 每次选择不同子树里的深度最大的点. 在同一颗子树里可能会在lca处出现问题. 那么我们选择重心,要考虑到会不会出现一颗子树不够选的操 ...

  6. JS设计模式之建造者模式

    建造者模式(builder pattern)属于创建型模式的一种,提供一种创建复杂对象的方式.它将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式是一步一步的创建 ...

  7. Linux—查看内核版本、系统版本、系统位数

    一.查看内核版本命令: 1) [root@q1test01 ~]# cat /proc/version   Linux version 2.6.9-22.ELsmp (bhcompile@crowe. ...

  8. 学习java的第八天

    一.今日收获 1.学习完全学习手册上2.3转义字符与2.4运算符两节 二.今日难题 1.没有什么难理解的问题 三.明日目标 1.哔哩哔哩教学视频 2.Java学习手册

  9. 日常Java 2021/10/5

    java 异常处理 Throwable中包括Error 和Exception,Exception包括IOException和RuntimeException 抛出异常 1.异常运算条件 Arithme ...

  10. stm32串行设备接口SPI控制max31865

    本人是刚入行的嵌入式,之前也没有多少项目经验,故在公司的这几个月里,可谓是如履薄冰,对于公司不同项目使用的不同的设备之多,数据手册之繁杂,让我不禁望洋兴叹,故而不愿意放弃周末这大好的自我提升时间,努力 ...