首先先来看这一张图

在这种图中，盒子的大小为512px，并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示

这些样式都不是重要的，这里加个margin是为了让其出现拖拽的时候出现鼠标偏移，好做演示而已，不然margin：0 auto 就可以实现盒子的居中

首先通过offsetLeft的方法获取到盒子的偏移值，然后在通过clientX,clientY获取到鼠标的坐标，通过当前坐标减去offsetLeft的坐标就可以获取鼠标在div里面的

具体数值，也就是鼠标应该在的地方

这个时候拖拽的时候回出现鼠标偏移的现象，没错，这是margin值搞的鬼，margin也是盒子的一部分，所有要获取到鼠标在盒子里面的位置的话，加上的margin要减掉

减掉的margin要加上，这个是我根据思路得到的代码，可以参考一下，大神请忽悠

js原生代码实现鼠标拖拽(超简单)的更多相关文章

  1. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  4. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  5. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  6. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

  7. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  8. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  9. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. Sql Server通用分页存储过程

    Sql Server2005通用分页存储过程 CREATE PROCEDURE [dbo].[Common_GetPagedList] ( @TableName nvarchar(100), --表名 ...

  2. 集群通信组件tribes之用法

    上面已经对tribes的内部实现机制及原理进行了深入的剖析.在理解它的设计原理后看看怎样使用tribes.整个使用相当简单便捷,仅仅须要四步: ① 定义一个消息对象,因为这个消息对象是要在网络之间传递 ...

  3. Effective C++ Item 38 通过复合塑模出 has-a 或 is-implemented-in-terms-of

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:在应用域,复合意味着 has-a. 在实现域.复合意味着 is-implemented ...

  4. iOS8 对开发人员来说意味着什么？

    今天凌晨.Apple WWDC2014 iOS8 正式推出. 或许,对于广大iOS用户来说,iOS8的创新并非特别多. 但对于开发人员来说,影响却将会是无比巨大的! 正如Apple官网上的广告:Hug ...

  5. POJ 2185 正解 KMP

    题意: 思路: 把每一行压成一个数 求一下 KMP 把每一列压成一个数 求一下KMP 答案就是两个周期之积 网上的好多题解都是错的---------.. //By SiriusRen #include ...

  6. OpenCV —— 矩阵操作

    多通道的矩阵 —— 通道是连续的!! 要将指向该数据类型的指针移动到下一通道,我们只需要将其增加1.如果想访问下一个“像素”或者元素集,则需要一定的偏移量 矩阵的step元素是矩阵中行的长度,单位为字 ...

  7. css3.0滚动条的优化

    .ass_showFriends{width: 93%;height: 8.35rem;overflow-y: auto;} .ass_showFriends::-webkit-scrollbar{w ...

  8. Es5正则

    ##JSON(ES5) 前端后台都能识别的数据.(一种数据储存格式) XNL在JSON出来前 JSON不支持  undefinde和函数. 示列:let = '[{"useername&qu ...

  9. ifup&&ifdown --- 激活/关闭指定的网络接口。

    ifup命令用于激活指定的网络接口. ifup eth0 #激活eth0 ifdown命令用于禁用指定的网络接口. ifdown eth0 #禁用eth0

  10. 数据库事务及其EF中如何处理事务

    一.基础知识 1)         使用事务级别ReadUnCommited 会产生脏读现像,意味着读取到的为UnCommited(未提交)的数据.怎么理解呢?在使用该隔离级别的事务开始后.更新了数据 ...