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( ...
随机推荐
- Android关联源码support-v4的问题解决
如果在有用到过viewpager或者fragmentActivity等一些v4包下的类,当我们按F3时无法查看到源码,这个时候就需要我们关联该源码,该源码的关联与android源码的关联不一样. 大家 ...
- 关于python协程的一个例子的学习
例子来自https://blog.tonyseek.com/post/event-manage-with-greenlet/ 加了一些注释看懂了: 注释中的数字表示执行的顺序,这个简单的例子用到了py ...
- tcp/ip协议listen函数中backlog参数的含义与php-fpm的502 Bad Gateway
To understand the backlog argument, we must realize that for a given listening socket, the kernel ma ...
- mysql 启动错误-server PID file could not be found
[root@centos var]# service mysqld stop MySQL manager or server PID file could not be found! [F ...
- [转]VS2005/2008过期之后简单实用的升级方法
网络上有不少key,但是用了之后没效果,发现了一个好方法可以解决. 把\vs\setup\下面的 setup.sdb文件用文本编辑器打开,然后改动其最后的一行([Product Key] 下面的一行 ...
- ArcGIS如何将表连接到空间数据上
当我们有一些空间数据和一些业务数据(表),希望把业务数据和空间数据连接起来时,可以采用ArcGIS Desktop进行操作.本文将介绍如何在ArcGIS Destop中将表和空间数据关联起来. Arc ...
- django 快速实现文件上传
前言 对于web开来说,用户登陆.注册.文件上传等是最基础的功能,针对不同的web框架,相关的文章非常多,但搜索之后发现大多都不具有完整性,对于想学习web开发的新手来说就没办法一步一步的操作练习:对 ...
- 值得拥有!精心推荐几款超实用的 CSS 开发工具
当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 CSS 开发工 ...
- 分享27款最佳的复古风格 WordPress 主题
WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易用. 复古风格可以应用于任何东西,从服装到室内设计,那么复古风格的 ...
- 基于Solr实现HBase的二级索引
文章来源:http://www.open-open.com/lib/view/open1421501717312.html 实现目的: 由于hbase基于行健有序存储,在查询时使用行健十分高效,然后想 ...