JavaScript如何实现鼠标左键拖拽效果

JavaScript如何实现鼠标左键拖拽效果

实现鼠标左键拖拽效果的两种方式:

方式一:

nbsp;html>            Document            .move {            width: 100px;            height: 100px;            background: red;            border-radius: 50%;            position:absolute;            left:0;            top:0;        }        
    
     //制作一个鼠标左键拖拽效果 var div = document.getElementsByClassName("move")[0]; var style = window.getComputedStyle(div); var divLeft = parseFloat(style.left); var divTop = parseFloat(style.top); div.onmousedown = function(e){ if(e.button !== 0){ return ;//不是鼠标左键,return } window.onmousemove = function(e){ divLeft += e.movementX;//距上次鼠标位置的X长度 divTop += e.movementY;//距上次鼠标位置的Y长度 div.style.left = divLeft + "px"; div.style.top = divTop + "px"; } window.onmouseup = window.onmouseleave = function(){ if(e.button === 0){//鼠标左键 window.onmousemove = null; } } }

登录后复制

 

相关视频教程推荐:《javascript高级教程

方式二:

立即学习“Java免费学习笔记(深入)”;

nbsp;html>            Document            .move {            width: 100px;            height: 100px;            background: red;            border-radius: 50%;            position:absolute;            left:0;            top:0;        }        
    
     //制作一个鼠标左键拖拽效果 var div = document.getElementsByClassName("move")[0]; var style = window.getComputedStyle(div); div.onmousedown = function(e){ if(e.button !== 0){ return ;//不是鼠标左键,return } var divLeft = parseFloat(style.left); var divTop = parseFloat(style.top); var divPageX = e.pageX; var divPageY = e.pageY; window.onmousemove = function(e){ var disX = e.pageX - divPageX; var disY = e.pageY - divPageY; div.style.left = divLeft + disX + "px"; div.style.top = divTop + disY + "px"; } window.onmouseup = window.onmouseleave = function(){ if(e.button === 0){//鼠标左键 window.onmousemove = null; } } }

登录后复制

相关推荐下载:《文字特效

以上就是JavaScript如何实现鼠标左键拖拽效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2728583.html

(0)
上一篇 2025年3月7日 23:57:48
下一篇 2025年3月1日 12:24:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript 如何实现横向瀑布流

    最近在做一个小程序项目,在 UI 上借鉴了一下其他 App 设计,其中有一个图片横向布局铺满的 UI 感觉挺好看的,类似于传统的瀑布流布局横过来一样。于是就自己实现了一下,并且将原本的横向两张图的方法扩展了下,改成了可以自定义显示张数的方法…

    2025年3月7日
    200
  • javascript数据类型分为哪两类

    javascript数据类型分为: 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 引用数据类型:对象(Object)、数组(Arra…

    2025年3月7日 编程技术
    200
  • javascript对象是如何定义的

    首先,对象也是一个变量,但对象可以包含多个变量。对象是变量的容器。 用var关键字来定义对象。 JavaScript用一个{…}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。 示例: var 对象名字={属性方法 var xia…

    2025年3月7日
    200
  • 如何理解javascript中的函数概念

    什么是函数? 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 我们来举一个小例子: 当我们点击按钮时,会弹出如下图所示的警告框: 立即学习“Java免费学习笔记(深入)”; 语法格式: function functionnam…

    2025年3月7日 编程技术
    200
  • javascript如何实现将两个数组合并

    将两个数组合并的方法有: 方法一:使用concat var a = [1,2,3];var b = [4,5,6]; 登录后复制 var c = a.concat(b);//c=[1,2,3,4,5,6]; 登录后复制 方法二:使用循环 f…

    2025年3月7日
    200
  • JavaScript 对象可以做到的几件事

    除了普通的对象属性赋值和遍历之外,我们还可以使用 javascript 对象执行许多其他操作。在本文中,我们将了解如何使用它们,包括访问内部属性、操作属性描述符和继承只读属性。 1. 访问内部属性 JavaScript 对象无法以常规方式访…

    编程技术 2025年3月7日
    200
  • js基础知识

    js基础概念 js的局部变量和全局变量 js的数据类型 var是弱数据类型, 但js是能识别他的数据类型的        function abc(){ var a=1; var b=”张三”; var c=true; var d=new …

    2025年3月7日 编程技术
    200
  • JavaScript对象迭代方法和性能的比较

    object.entries 返回对象所有可枚举的键值对,不会追寻原型链上的 key let obj = {  key1: ‘value1’,  key2: ‘value2’,  key3: ‘value3’,}Object.entries…

    编程技术 2025年3月7日
    200
  • javascript阻塞问题

    javascript 阻塞程序运行 javascript的线程问题 JavaScript 是单线程的,一段 Js 程序的运行会占满整个程序进程,我们通常会想方设法的通过异步编程来减少程序的阻塞,但在某些特殊的场景下我们需要阻塞程序的运行,那…

    编程技术 2025年3月7日
    200
  • 你不太了解的JSON

    前言 这个知识点面试中被问的概率虽然很低,但是也有可能会问。 JSON流行原因 拥有与js类似的语法 可以将JSON数据结构解析成js对象 与XML数据结构对比,提取数据更简单 JSON语法 简单值 字符串=>“123” 数值=&gt…

    2025年3月7日
    200

发表回复

登录后才能评论