js实现拖拽
拖拽：最核心是三个事件，鼠标按下，鼠标移动，鼠标弹起。按下时激活拖拽，然后时刻根据鼠标的位置来更新物体的left和top值，达到跟随鼠标的效果，鼠标弹起则取消拖拽。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>拖拽</title>
<style>
*{
margin:0px;
}
div{
height:200px;
width:200px;
background:red;
position: absolute;
cursor:pointer; }
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById('d');
odiv.onmousedown=function(event){
var e=event||window.event;
var difx=event.clientX-odiv.offsetLeft;//刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动,difx和dify为点击处
var dify=event.clientY-odiv.offsetTop; //离物体左上角（实际位置）的距离 document.onmousemove=function(event){ var event=event||window.event;
var left=event.clientX-difx;
var top=event.clientY-dify;
var maxleft=document.documentElement.clientWidth-odiv.offsetWidth; //计算最大移动距离
var maxtop=document.documentElement.clientHeight-odiv.offsetHeight;
left=left<0?0:left; //防止越界
left=left>maxleft?maxleft:left;
top=top<0?0:top;
top=top>maxtop?maxtop:top; odiv.style.left=left+'px'; //时刻更新位置达到跟随鼠标
odiv.style.top=top+'px'; }
document.onmouseup=function(){ //鼠标弹起，取消事件
document.onmouseup=null;
document.onmousemove=null;
}
} } </script>
</head>
<body>
<div id='d'></div>
</body>
</html>
原理很简单，但实现过程要考虑很多细节，如刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动，还有计算物体有没有越界，越界则停止移动等细节问题。
js实现拖拽的更多相关文章
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- JS—实现拖拽
JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...
- js鼠标拖拽
html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...
- 原生Js实现拖拽（适用于pc和移动端）
效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 实现拖拽排序
<!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...
- jquery.dragsort.js 实现拖拽过程遇到的问题
.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...
- JS实现拖拽功能
本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
随机推荐
- Ubuntu apt命令
http://www.tecmint.com/useful-basic-commands-of-apt-get-and-apt-cache-for-package-management/ apt-ca ...
- 开发常用到的terminal命令
1.删除work_plugin目录下的.svn文件(最后面的;也是命令的一部分) sudo find /Users/maxinliang/DaTang/work_plugin ".svn&q ...
- mysql 索引- 笔记
索引 mysql最常用的索引结构是btree(O(log(n))),但是总有一些情况下我们为了更好的性能希望能使用别的类型的索引.hash就是其中一种选择,例如我们在通过用户名检索用户id的时候,他们 ...
- Reactor模式与Proactor模式
该文章总结了网上资源对这两种模式的描述 原文地址:http://www.cnblogs.com/dawen/archive/2011/05/18/2050358.html 1.标准定义 两种I/O多路 ...
- myeclipse 2013 SR2 for(MAC/WINDOWS)破解 注册过程
前天去官网下载的时候都还只是sr1,结果昨天去看居然有sr2了,之前一直在windows下用 2013,网上的注册机都还很好用.但最近换了mac,下载的sr1我却无论如何都没办法破解,下载了N个版本的 ...
- emacs工程管理,cedet ede插件自动构建Make,Automake
鉴于自己一直都是在做客户端开发方面的工作,服务端很多知识都随着时间淡忘了,最近有一个计划,用一些时间补一下基础.所以早上很早就起床,花了一点时间大致浏览了一下BSD socket的相关API,然后用G ...
- UnWind Segue
iOS 6 和 Xcode 4.5 中添加了一个新特性叫做“Unwind Segue”. 使用Unwind Segue,可以方便的在Navigation Controller的Controllers之 ...
- 经典信息图表：2013 扁平设计 VS 拟物设计
inTacto 是一家互动数字公司,由 Alejandro Lazos 和 Sebastian Caramés 成立于2001年.他们刚刚发布一个信息图表:<平面设计 VS 现实主义>.这 ...
- linux根目录下文件夹概览
/ 根目录 /bin 存放必要的命令 /boot 存放内核以及启动所需的文件等 /dev 存放设备文件 /etc 存放系统的配置文件 /home 用户文件的主目录,用户数据存放在其主目录中 /lib ...
- iOS10新特性之CallKit开发详解：锁屏接听和来电识别
国庆节过完了,回家好好休息一天,今天好好分享一下CallKit开发.最近发现好多吃瓜问CallKit的VoIP开发适配,对iOS10的新特性开发和适配也在上个月完成,接下来就分享一下VoIP应用如何使 ...