<!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. 一看就懂的IdentityServer4认证授权设计方案

    查阅了大多数相关资料,总结设计一个IdentityServer4认证授权方案,我们先看理论,后设计方案. 1.快速理解认证授权 我们先看一下网站发起QQ认证授权,授权通过后获取用户头像,昵称的流程. ...

  2. not noly go —— 运行轨迹[一]

    前言 学习一下go 语言,也不完全是go,几乎是所以语言通用的部分,主要在于巩固一下基础,几乎不会涉及到语法相关的东西. 正文 前置内容 说起语言,很多人喜欢谈论解释型语言和编译型语言,其实对语言谈论 ...

  3. vue如何写组件（script标签引入的方式）

    很多人知道.vue结构的单文件组件形式,不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了,那如果我们又想用vue来写模板,又不想引入vue-cli管理,那该怎么来写组件呢?别着 ...

  4. myeclipse与tomcat，运行jsp程序

    一.myeclipse中配置JRE 步骤: 1.选择window->preferences->Java->Installed JREs 2.点击窗口右边的"add" ...

  5. [cf700D]Huffman Coding on Segment

    令$tot_{i}$为区间$[l,r]$中满足$a_{j}=i$的$j$的个数,将所有非0的$tot_{i}$取出,得到可重集$S$ 显然,有以下贪心:不断取出$S$中最小的两个元素,删除这两个元素并 ...

  6. [cf1515H]Phoenix and Bits

    记$V=2^{20}-1$,即值域范围,也可以作为"全集" 显然与$a_{i}$的顺序无关,对所有$a_{i}$维护一棵trie树 关于如何维护这棵trie树,考虑使用分裂+合并的 ...

  7. [luogu6185]序列

    对于2操作,如果把这些操作看成边,那么对于某一个连通块内的若干个点,满足权值可以任意分配(证明:归纳,若n个点可以,那么先将新增的点调整好,再对原来n个点重新分配即可),因此可以将原图缩点,并将连通块 ...

  8. 最难忘的一次bug：谢谢实习时候爱学习的自己

    前言 时间的车轮一直向前不停,试图在时光洪流中碾碎一些久远的记忆.虽然记忆中的人离我越来越远,但是故事却越来越深刻. 当在博客园看到这次的正文题目是"最难忘的bug",脑海里瞬间浮 ...

  9. IDEA 2021.2.3 安装与破解教程

    首先说明,大部分情况下,花10块钱都可以在淘宝找人直接帮你完美解决这个资源问题 所以千万不要相信一些所谓的百度结果,一般都是花费了时间却最后无法解决破解的问题 我相信任何一个想要学习软件开发的人一定要 ...

  10. 如何使用Docker构建开发环境

    我们在开发中都会遇到这样的问题:在本地开发好功能后,部署到服务器,或者其他人拉到本地接着开发时,会出现功能无法使用的情况. 这些异常情况,大多数时候是因为系统不同而导致的依赖差异.因此,为了解决这个问 ...