<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS拖拽div（移动）-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>

#dv {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="dv" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)"></div>
<script>//这个是网上摘录的。
var mouseX, mouseY,div;
var objX, objY;
var isDowm = false;
function mouseDown(obj, e) {
div = obj;
obj.style.cursor = "move";
objX = div.offsetLeft;
objY = div.offsetTop;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(e) {

var x = e.clientX;
var y = e.clientY;
if (isDowm) {
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
}
}
function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
div.style.cursor = "default";
isDowm = false;
}
}
</script>
<script>//这个是我改造的一个。
//获取元素
var dv;
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
function mouseDown(obj, e) {
dv = obj;//document.getElementById('dv');
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;
//获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
}
function mouseMove(e) {
if (isDown == false) {
return;
}
//获取x和y
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);

dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
}
function mouseUp(e) {
isDown = false;
dv.style.cursor = 'default';
}

</script>
</body>
</html>

JS拖拽div（移动）的更多相关文章

  1. JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div

    标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  4. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  5. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  6. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  7. js拖拽效果的实现

    1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  8. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

随机推荐

  1. 微信浏览器无法跳转到apk下载链接 微信屏蔽了我的APP下载链接如何处理

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时,界面显示一片空白,容易误导以为在下载呢 <!DOCTYPE html><html>&l ...

  2. vue-calendar 基于 vue 2.0 开发的轻量，高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  3. APP包打包签名步骤

    开发混合app上架应用市场,需要进行应用签名,但是申请签名如果没搞过,会特别麻烦,所以我自自己总结了一下申请的步骤,在此记录一下 1.首先需要下载安装java环境即jdk, 2.配置环境变量 假设JD ...

  4. 浅谈redis的HyperLogLog与布隆过滤器

    首先,HyperLogLog与布隆过滤器都是针对大数据统计存储应用场景下的知名算法. HyperLogLog是在大数据的情况下关于数据基数的空间复杂度优化实现,布隆过滤器是在大数据情况下关于检索一个元 ...

  5. C# [WIN32] [API] Global Hook

    NativeMethods.cs: using System; using System.Runtime.InteropServices; namespace GlobalHook { interna ...

  6. asp.net IHttpModule浅析

    在asp.net程序中,我们除了使用系统自带的HttpModule模块,还可以自己定义一些自己的HttpModule接口模块.一个asp.net程序可以接收多个HttpModule模块. 众所周知,a ...

  7. input输入框失去焦点，软键盘关闭后，滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  8. [图形学]VS2017中OpenGL的下载及安装中的异常

    1.放dll文件:C:\Windows\SysWOW64 或C:\Windows\windows32 2.lib和h:C:\Program Files (x86)\Microsoft Visual S ...

  9. How to convert Word table into Excel using OpenXML

    原文出处:https://code.msdn.microsoft.com/How-to-convert-Word-table-0cb4c9c3 class Program { static void ...

  10. linux(ubuntu)GCC编译包含库函数的问题

    GCC 编译命令通常为:gcc hello.c -o hello.out 注意:若hello.c中引用有库函数(比如math.h),直接编译会出错 "/tmp/ccalvMPY.o: In ...