自定义JavaScript实现基础拖拽效果

66 浏览量更新于2024-08-30 收藏 71KB PDF 举报

在前端开发中，拖拽效果是一种常见的交互设计，能够增强用户体验。尽管jQuery UI的`draggable`插件是一个强大的工具，但对于追求深入理解的开发者来说，亲手实现一个简单的拖拽功能也是一种学习和实践的过程。本文档详细介绍了如何使用JavaScript和HTML来实现这种基础的拖拽效果。首先，我们从HTML和CSS部分开始。创建一个包含待拖拽元素的HTML结构，如一个宽高为100px的红色正方形div，设置了绝对定位和可拖动的样式，例如： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单拖拽效果</title> <style> * { margin: 0; padding: 0; } #div1 { position: absolute; width: 100px; height: 100px; cursor: move; background-color: red; } </style> </head> <body> <div id="div1"></div> </body> </html> ``` 接着，进入JavaScript部分，关键在于处理鼠标按下、移动和松开的事件。当用户点击div时，我们需要记录鼠标的初始位置与div的位置差（distanceX和distanceY），然后在鼠标移动时更新div的位置，确保不会超出页面边界： ```javascript <script> window.onload = function () { // 获取待拖拽的div var div1 = document.getElementById("div1"); // 鼠标按下事件 div1.onmousedown = function (evt) { var oEvent = evt || event; // 计算初始距离 var distanceX = oEvent.clientX - div1.offsetLeft; var distanceY = oEvent.clientY - div1.offsetTop; // 添加鼠标移动事件监听 document.addEventListener("mousemove", function (evt) { var oEvent = evt || event; // 更新div的位置 var left = oEvent.clientX - distanceX; var top = oEvent.clientY - distanceY; // 防止div超出边界 if (left <= 0) { left = 0; } else if (left >= document.documentElement.clientWidth - div1.offsetWidth) { left = document.documentElement.clientWidth - div1.offsetWidth; } if (top <= 0) { top = 0; } else if (top >= document.documentElement.clientHeight - div1.offsetHeight) { top = document.documentElement.clientHeight - div1.offsetHeight; } // 更新div的实际位置 div1.style.left = left + 'px'; div1.style.top = top + 'px'; }); // 鼠标抬起事件（这里省略，通常会在`onmouseup`或`onmouseleave`中移除监听器） }; }; </script> ``` 这个简单的JavaScript实现展示了如何通过事件处理程序来实现一个基本的拖拽功能，包括鼠标按下获取初始偏移、鼠标移动实时调整div位置以及边界检查。虽然没有jQuery UI的拖拽插件功能全面，但这是一个很好的起点，可以帮助开发者理解拖拽事件的基本原理。通过这个例子，你可以进一步扩展和优化你的拖拽功能，比如添加可拖拽范围限制、拖动过程中禁用其他元素的交互等。

使用使用js实现的简单拖拽效果实现的简单拖拽效果

前端开发的时候，有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底

的人，抽点时间用js小小的实现了类似的插件，话不多说。

　　first:　　html和和css

代码如下:

<head>

<style>

* {

margin: 0;

padding: 0;

}

#div1 {

position: absolute;

width: 100px;

height: 100px;

cursor: move;

background-color: red;

}

</style>

</head>

<body>

</div>

</body>

</html>

now,先把主要算法实现一下：

代码如下:

window.onload = function () {

//获取需要拖拽的div

var div1 = document.getElementById(“div1”);

//添加鼠标按下事件

div1.onmousedown = function (evt) {

var oEvent = evt || event;

//获取按下鼠标到div left top的距离

var distanceX = oEvent.clientX – div1.offsetLeft;

var distanceY = oEvent.clientX – div1.offsetTop;

//添加doc滑动时间

document.onmousemove = function (evt) {

var oEvent = evt || event;

//重新计算div的left top值

var left = oEvent.clientX – distanceX;

var top = oEvent.clientY – distanceY;

//left 当小于等于零时，设置为零防止div拖出document之外

if (left <= 0) {

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38646645

粉丝: 4
资源: 1001

自定义JavaScript实现基础拖拽效果

jquery简单实现拖拽效果

【JavaScript源代码】JavaScript实现简单的拖拽效果.docx

js实现简单的拖拽效果

【JavaScript源代码】JavaScript实现简单拖拽效果.docx

使用JavaScript实现拖拽效果

JavaScript实现的简单拖拽效果

javascript实现完美拖拽效果

JS实现盒子拖拽效果

js实现单元格拖拽效果

js实现鼠标拖拽效果

最新资源