<!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. Django笔记&教程 0-2 框架版本与相关工具

    Django 自学笔记兼学习教程第0章第2节-- 框架版本与相关工具 点击查看教程总目录 1 版本 python: 3.6.5 Django: 2.2.11 (有些地方我也会对比下各种版本的区别) 安 ...

  2. go微服务框架Kratos笔记（七）使用jwt认证中间件

    引言 Json web token (JWT) 是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,特别适用于分布式站点的单点登录(SSO)场景.JWT的声明一般被用来在身份提供者和 ...

  3. Sentry 官方 JavaScript SDK 简介与调试指南

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  4. APM监控--（三）zipkin部署手册

    一,基础知识储备分布式跟踪的目标一个分布式系统由若干分布式服务构成,每一个请求会经过多个业务系统并留下足迹,但是这些分散的数据对于问题排查,或是流程优化都很有限,要能做到追踪每个请求的完整链路调用,收 ...

  5. 分布式条件下Integer大小比值的问题

    目录 起因 但是,搞大数据的同学请注意了! 动机 验证 处理 起因 临下班,偶然看到阿里巴巴<JAVA开发手册>中,关于整型包装类对象之间值的比较的规约,里面提到强制使用equals,而不 ...

  6. [ARC117E]Zero-Sum Ranges 2

    令$sum_{i}=\sum_{j=1}^{i}a_{j}$,即要求其满足: 1.$sum_{0}=sum_{2n}=0$且$\forall 1\le i\le 2n,|sum_{i}-sum_{i- ...

  7. [bzoj5510]唱跳rap和篮球

    显然答案可以理解为有(不是仅有)0对情况-1对情况+2对情况-- 考虑这个怎么计算,先计算这t对情况的位置,有c(n-3t,t)种情况(可以理解为将这4个点缩为1个,然后再从中选t个位置),然后相当于 ...

  8. vue的常用指令

    https://www.bootcdn.cn/ 前端资源库 <!-- 常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-i ...

  9. [NOI2020] 美食家

    很好,自己会做NOI签到题了,去年只要会这题,再多打点暴力,\(Ag\)到手,希望今年\(NOI\)同步赛过\(Ag\)线吧,得有点拿得出手的成绩证明啊. 考虑\(T\)非常大,\(n\)又很小. 想 ...

  10. exCRT & 骆克强乘法

    exCRT & 骆克强乘法 只是丢两个板子啦. exCRT的做法就是每次拿两个方程合并成一个,合并的过程推下式子就是个 exgcd.具体可以在 zjk 的 ptt 里面找到. 先放个 $ O( ...