js原生代码实现鼠标拖拽(超简单)
首先先来看这一张图
在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示
这些样式都不是重要的,这里加个margin是为了让其出现拖拽的时候出现鼠标偏移,好做演示而已,不然margin:0 auto 就可以实现盒子的居中
首先通过offsetLeft的方法获取到盒子的偏移值,然后在通过clientX,clientY获取到鼠标的坐标,通过当前坐标减去offsetLeft的坐标就可以获取鼠标在div里面的
具体数值,也就是鼠标应该在的地方
这个时候拖拽的时候回出现鼠标偏移的现象,没错,这是margin值搞的鬼,margin也是盒子的一部分,所有要获取到鼠标在盒子里面的位置的话,加上的margin要减掉
减掉的margin要加上,这个是我根据思路得到的代码,可以参考一下,大神请忽悠
js原生代码实现鼠标拖拽(超简单)的更多相关文章
- js鼠标拖拽
html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
- 基于svg.js实现对图形的拖拽、选择和编辑操作
本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...
- 完美实现鼠标拖拽事件,解决各种小bug,基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
随机推荐
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- 【J-meter】参数及相应数据中文显示乱码问题
参考资料: http://www.51testing.com/html/00/130600-1360743.html http://www.cnblogs.com/fengpingfan/p/5851 ...
- 第四次python作业——叶耀宗
设计题2: 1.参考“三国演义”词频统计程序,实现对红楼梦出场人物的频次统计.2.(可选)将红楼梦出场人物的频次统计结果用词云显示. import jieba excludes = {"什么 ...
- C++ lambda表达式 (一)
为什么要lambda函数 匿名函数是许多编程语言都支持的概念,有函数体,没有函数名.1958年,lisp首先采用匿名函数,匿名函数最常用的是作为回调函数的值.正因为有这样的需求,c++引入了lambd ...
- Java解析注解
package com.itbuluoge.anno; import java.lang.reflect.Method; import java.util.ArrayList; import java ...
- js ---- 函数防抖
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- javafx Hanoi
Netbean java8 source code :http://files.cnblogs.com/files/rojas/HNT.zip screenshot: 1 model /* ...
- Self-Taught Learning to Deep Networks
In this section, we describe how you can fine-tune and further improve the learned features using la ...
- sparksql不支持hive中的分区名称大写
但是在hive中查询是可以的. 后来经过一点一点测试发现,原来分区名称不能是大写,必须小写才行.
- 执行异步UI更新
异步更新UI的几种方法①.使用Control.Invoke方式来更新数据 foreach (DataGridViewRow dgvr in this.dgv_s ...