JavaScript实现div拖拽并保存位置
"该资源是关于使用JavaScript实现HTML中div元素的拖拽功能,并在页面刷新后能够保存拖动后的位置。主要涉及的技术点包括div样式设置、事件处理、坐标计算以及Cookie的使用来持久化位置信息。" 在这个示例中,我们看到一个基本的JavaScript拖放解决方案,它允许用户通过鼠标拖动一个id为`div1`的div元素并改变其在页面上的位置。以下是关键知识点的详细解释: 1. CSS样式设置:`#div1`被定义为一个绝对定位的元素,具有100px的宽和高,背景色为红色。`position:absolute`使得div可以脱离文档流,允许它根据相对于最近的非静态定位祖先元素的位置进行定位。 2. JavaScript事件处理: - `onmousedown`事件:当用户按下鼠标按钮时触发,记录div的初始鼠标相对位置(`disX`和`disY`)。 - `onmousemove`事件:在鼠标移动时触发,计算新的left和top值,确保div在页面中的位置正确。`clientWidth`用于获取视口宽度,`offsetWidth`获取div自身的宽度。 - 需要注意的是,为了防止div移出视口,代码还添加了边界检查。 3. Cookie操作: - `setcookie`函数用于设置Cookie,包括名称、值和过期日期。 - `getcookie`函数用于获取特定名称的Cookie值。 - `removecookie`函数用于删除指定名称的Cookie。 4. 位置保存与恢复: - 当div位置发生变化时,可以通过更新Cookie保存新的left和top值。 - 页面加载时,可以通过读取Cookie恢复div的位置,将div定位到之前保存的坐标。 5. 事件委托:在示例中,整个document上绑定了`onmousemove`事件,而不是直接在div上,这是因为当div在拖动过程中可能离开鼠标,此时直接绑定在div上的`onmousemove`无法触发。 这个示例提供了一个基础的拖放功能实现,但实际应用中可能需要考虑更多细节,例如防止快速拖动导致的卡顿、多元素拖放、响应式布局下的适应性等。在生产环境中,更推荐使用像`HTML5`的`Drag and Drop API`这样的标准接口来实现更复杂和优化的拖放功能。
<html>
<head>
<style>
#div1{ width:100px ; height:100px ; position:absolute ;background:red;}
</style>
<script>
function setcookie(name,value,iDay) //设置cookie
{var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';exprise='+oDate;}
function getcookie(name) //获取cookie
{var arr=document.cookie.split(';');
var i=0;
for (i=0;i<arr.length;i++)
{var arr2=arr[i].split('=');
if(arr2[0]==name)
{ return arr2[1];}}
return '';}
function removecookie(name) //删除cookie
{setcookie(name,'1',-1);} //cookie封装
window.onload=function() //页面加载执行
{ var oDiv=document.getElementByIdx_x_x_x_x('div1');
var disX=0; //定义两个变量存储鼠标与div坐标的相对距离
var disY=0;
oDiv.onmousedown=function(ev) //鼠标按下执行
{ var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //存储初始距离
下载后可阅读完整内容,剩余2页未读,立即下载
拖动时容易选中latex文字,影响拖动效果,将latex保存在本地json,json包含latex、坐标,html可以读取json创建 ziyuanfeimeng -
粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理
展开
- 我的资源
快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分
登录查看自己的积分
- 我的C币
登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
-
C++标准程序库:权威指南
-
Java解惑:奇数判断误区与改进方法
-
C++编程必读:20种设计模式详解与实战
-
LM3S8962微控制器数据手册
-
51单片机C语言实战教程:从入门到精通
-
Spring3.0权威指南:JavaEE6实战
-
Win32多线程程序设计详解
-
Lucene2.9.1开发全攻略:从环境配置到索引创建
-
内存虚拟硬盘技术:提升电脑速度的秘密武器
-
Java操作数据库:保存与显示图片到数据库及页面
-
ISO14001:2004环境管理体系要求详解
-
ShopExV4.8二次开发详解
-
企业形象与产品推广一站式网站建设技术方案揭秘
-
Shopex二次开发:触发器与控制器重定向技术详解
-
FPGA开发实战指南:创新设计与进阶技巧
-
ShopExV4.8二次开发入门:解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证 文档复制为VIP权益,开通VIP直接复制 信息提交成功
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展