<!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. docker file 笔记

    FROM    # FROM scratch,  FROM centos, FROM ubuntu:latest LABEL RUN  # 每运行一次RUN,image都会生成新的一层,为了美观,避免 ...

  2. Vue组件传值prop验证方式

    在Vue组件开发过程中,父组件要经常给子组件传递数据,在传递数据的过程中,子组件可以使用prop来接收父组件传递的值,同时呢,我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个 ...

  3. MAC VMware fusion 12.1.0 Centos7 网络配置

    虚拟机选择NAT模式 获取mac机器中vmnet8的gateway地址 找到 # NAT gateway address这一行,下面的ip就是gateway地址 cat /Library/Prefer ...

  4. 大爽Python入门教程 总目录

    作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 大爽Python入门公开课教案 本篇博客为公开课教案目录,正文内容在目录章节链接的博客里 除目录本身外,没有链接的章节, ...

  5. 记一次 .NET 某电商无货源后端服务 死锁分析

    一:背景 1. 讲故事 这个月初,星球里的一位朋友找到我,说他的程序出现了死锁,怀疑是自己的某些写法导致mongodb出现了如此尴尬的情况,截图如下: 说实话,看过这么多dump,还是第一次遇到真实的 ...

  6. Java设计模式之（四）——原型模式

    1.什么是原型模式 Specify the kinds of objects to create using a prototypical instance,and create new object ...

  7. Dapr-状态管理

    前言: 前一篇对Dapr的服务调用方式进行了解,本篇继续对状态管理进行了解. 一.状态管理-解决的问题 在分布式应用程序中跟踪状态存在一下问题: 应用程序可能需要不同类型的数据存储. 访问和更新数据时 ...

  8. Java 处理表格，真的很爽！

    一个简单又快速的表格处理库 大家好,我是鱼皮. 处理 Excel 表格是开发中经常遇到的需求,比如表格合并.筛选表格中的某些行列.修改单元格数据等. 今天给大家分享一个 Java 处理表格的工具库,不 ...

  9. vue文件引入

    <template> <div class="hello"> <h1>{{ msg }}</h1> <!-- <h1&g ...

  10. [spring-core]作用域

    本文试图从原理上讲解Spring IoC容器的作用域机制,建议对着源码阅读,事半功倍. 0 引入问题 当我们谈到Spring作用域的时候,自然而然会想到如下作用域(来自spring-core官方文档) ...