<!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. 监控框架 - prometheus

    1.关于Prometheus Prometheus是一个根据应用的metrics来进行监控的开源工具.相信很多工程都在使用它来进行监控,有关详细介绍可以查看官网:https://prometheus. ...

  2. NOIP模拟96(多校29)

    T1 子集和 解题思路 大概是一个退背包的大白板,然而我考场上想复杂了,竟然还用到了组合数. 但是大概意思是一样的,有数的最小值一定是一个在 \(a\) 数组中存在的数字. 那么我们想办法除去它对应的 ...

  3. 解决IE6，边框问题

    IE6是一个让人蛋疼而又无奈的浏览器,这次不经意间发现了一个BUG的解决发放,给大家分享一下 直接中部代码<input type="text" value="&qu ...

  4. 你真的懂Redis的5种基本数据结构吗？

    摘要: 你真的懂Redis的5种基本数据结构吗?这些知识点或许你还需要看看. 本文分享自华为云社区<你真的懂Redis的5种基本数据结构吗?这些知识点或许你还需要看看>,作者:李子捌. 一 ...

  5. [loj6271]生成树求和

    将每一位拆开考虑,即不妨假设$0\le c<3$ 考虑矩阵树定理,即统计所有生成树边权乘积的和,但我们这里要将边权相加,很明显将其作为幂次(如果作为$cx+1$无法对3取模) 更具体的,也就是将 ...

  6. [atAGC051C]Flipper

    对于这一个平面用$a_{x,y}$来表示,即$(x,y)$为黑色则$a_{x,y}=1$,否则$a_{x,y}=0$,之后定义$a$能生成$b$当且仅当$a$能够通过若干次操作后得到$b$ 令$p_{ ...

  7. SpringCloud微服务实战——搭建企业级开发框架（二十一）：基于RBAC模型的系统权限设计

    RBAC(基于角色的权限控制)模型的核心是在用户和权限之间引入了角色的概念.取消了用户和权限的直接关联,改为通过用户关联角色.角色关联权限的方法来间接地赋予用户权限,从而达到用户和权限解耦的目的. R ...

  8. synchronized的一些理解

    1. 两个普通的synchronized package ThreadTest; import java.util.concurrent.TimeUnit; public class ThreadTe ...

  9. 353 stars Java项目！Java小白必看！austin介绍 【第一话】

    有好几个群友问我为什么最近更新变慢了.工作忙是一方面,另一方面是我更新文章的动力确实下降了.近大半年一直在更新的<对线面试官>系列,到现在已经40篇了. 说实话,当时我更新该系列有很大一部 ...

  10. Codeforces 750E - New Year and Old Subsequence（线段树维护矩阵乘法，板子题）

    Codeforces 题目传送门 & 洛谷题目传送门 u1s1 我做这道 *2600 的动力是 wjz 出了道这个套路的题,而我连起码的思路都没有,wtcl/kk 首先考虑怎样对某个固定的串计 ...