网站内容建设包括,公司管理体系包括哪四个体系,聚宝汇 网站建设,开发微信小程序大概需要多少钱目录 前言
实现思路
获取事件对象和坐标点#xff1a;
配合定位#xff1a;
鼠标事件监听#xff1a;
拖拽过程#xff1a;
停止拖拽#xff1a;
代码实现#xff08;代码讲解#xff09; 前言 JavaScript的拖拽效果是一种常见的交互技术#xff0c;它允许用户…目录 前言
实现思路
获取事件对象和坐标点
配合定位
鼠标事件监听
拖拽过程
停止拖拽
代码实现代码讲解 前言 JavaScript的拖拽效果是一种常见的交互技术它允许用户通过鼠标操作在网页中拖拽拖动元素。这种技术可以为网站和应用程序带来多种用途和好处如增强用户体验实现拖放功能图形设计和游戏排序和重新排列数据可视化创建可自定义界面等等。总之JavaScript的拖拽效果是一种强大的交互技术可以提高用户体验、增加网站或应用程序的功能性并创造更富有创意和直观的用户界面。 实现思路 获取事件对象和坐标点 当鼠标按下时触发 mousedown 事件。在 mousedown 事件处理程序中可以使用事件对象来获取鼠标点击的坐标点通常使用 event.clientX 和 event.clientY 属性来获取鼠标相对于视窗的坐标点。 配合定位 要实现拖拽效果通常需要操作被拖拽的元素的位置。这可以通过设置元素的 style.left 和 style.top 属性来实现。在 mousedown 事件处理程序中可以记录鼠标点击时元素的初始位置通常是元素的左上角坐标。 鼠标事件监听 在 mousedown 事件中将鼠标的 mousemove 和 mouseup 事件监听器附加到 document 上。这是因为当用户按住鼠标拖动元素时鼠标可能会离开元素但我们仍然要捕获移动和释放事件。 拖拽过程 在 mousemove 事件处理程序中计算鼠标移动的距离新坐标点与初始坐标点之间的差值。使用这个差值来更新元素的位置将初始位置坐标与差值相加并将结果分别赋给 style.left 和 style.top。这样元素将跟随鼠标的移动而移动。 停止拖拽 当用户释放鼠标按钮时触发 mouseup 事件。在 mouseup 事件处理程序中移除 mousemove 和 mouseup 事件监听器以停止拖拽操作。 代码实现代码讲解
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title拖拽效果/titlestyle* {margin: 0;padding: 0;}.wp {width: 200px;height: 200px;background: #04be02;position: absolute;left: 100px;top: 100px;}/style
/head
bodydiv classwp/div
/body
/html
script
// 获取拖拽元素
let wp document.querySelector(.wp)// 当鼠标按下时
wp.onmousedown function(){// 计算鼠标点击点距离元素左边和上边的距离let diX event.clientX - wp.offsetLeft;let diY event.clientY - wp.offsetTop;console.log(diX,diY);// 在文档上添加鼠标移动事件监听器document.onmousemove function(){// 计算元素新的左上角坐标let oLeft event.clientX - diX;let oTop event.clientY - diY;// 限制元素不超出页面边界if (oLeft 0) {oLeft 0;}if (oTop 0) {oTop 0;}let maxLeft window.innerWidth - wp.offsetWidth;let maxTop window.innerHeight - wp.offsetHeight;if (oLeft maxLeft) {oLeft maxLeft;}if (oTop maxTop) {oTop maxTop;}// 设置元素的定位位置wp.style.left oLeft px;wp.style.top oTop px;}
}// 当鼠标释放时移除鼠标移动事件监听器停止拖拽
document.onmouseup function(){document.onmousemove null;
}
/script
