js div在指定区域拖动

基础概念

在JavaScript中实现一个div元素在指定区域内的拖动功能，通常涉及到以下几个基础概念：

事件监听：使用mousedown、mousemove和mouseup等事件来跟踪用户的鼠标操作。
坐标计算：计算鼠标按下时的初始位置和移动时的新位置，并据此更新div的位置。
边界检查：确保div在拖动过程中不会超出指定的边界。

类型与应用场景

固定区域拖动：适用于需要在特定区域内自由移动的元素，如工具栏、对话框等。
限制边界拖动：确保元素不会被拖出可视区域或特定容器外，常用于游戏界面或复杂布局中。

示例代码

以下是一个简单的示例，展示如何实现一个div在指定区域内的拖动功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Div</title>
<style>
  #container {
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid black;
  }
  #draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="container">
  <div id="draggable"></div>
</div>

<script>
  const container = document.getElementById('container');
  const draggable = document.getElementById('draggable');

  let offsetX, offsetY;

  draggable.addEventListener('mousedown', (e) => {
    offsetX = e.clientX - draggable.offsetLeft;
    offsetY = e.clientY - draggable.offsetTop;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });

  function onMouseMove(e) {
    let left = e.clientX - offsetX;
    let top = e.clientY - offsetY;

    // 边界检查
    if (left < 0) left = 0;
    if (top < 0) top = 0;
    if (left + draggable.offsetWidth > container.offsetWidth) {
      left = container.offsetWidth - draggable.offsetWidth;
    }
    if (top + draggable.offsetHeight > container.offsetHeight) {
      top = container.offsetHeight - draggable.offsetHeight;
    }

    draggable.style.left = `${left}px`;
    draggable.style.top = `${top}px`;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：div在拖动时出现卡顿或闪烁

原因：可能是由于频繁的重绘和回流导致的性能问题。
解决方法：使用transform属性代替left和top进行位置更新，因为transform不会触发回流，性能更好。

draggable.style.transform = `translate(${left}px, ${top}px)`;

问题2：div超出指定区域

原因：边界检查逻辑不完善或未正确实现。
解决方法：确保在onMouseMove函数中正确计算并限制div的位置，如上面的示例代码所示。

通过以上方法和示例代码，你应该能够实现一个平滑且在指定区域内拖动的div元素。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Cocos Creator 拖动去指定区域

我们要实现的效果是，按住并拖动一个小物体，物体跟随手指（鼠标）移动。拖到指定位置放下。如果没有到指定位置，则回到上一个位置。新建脚本DragToTarget.ts，挂到预制体上。..._oldPos; // 回去 } } // 判断触摸事件是否在槽位里 _withinTarget(targetNode: cc.Node, touchEvent...targetNode.parent.convertToNodeSpaceAR(location); return rect.contains(point); } } 思路与之前的拖动类似...在最后TOUCH_END的时候，判断自己是否在目标区域内。如果不在则返回上一个坐标。在场景中使用 import DragToTarget from ".

1.8K2 1

JS实现鼠标拖动div移动

.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY...= document.getElementById("div1"); var x = e.clientX; var y = e.clientY;...(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) +..."px"; document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y...= document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX

34.4K2 0

原生js拖拽指定div

DOCTYPE html> 原生js拖拽效果 div id="box">div> <script type="text/javascript

9.9K2 0

js 打印机打印指定局部区域

--startprint--> div> Песня о буревестнике Над седой равниной моря ветер тучи собирает...… div> <!..., prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容 window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给...body.innerHTML window.print(); //调用浏览器的打印功能打印指定区域 location.reload(); //重新给页面内容赋值； }

6.7K5 0

Python截图PDF，在指定区域并提取文本

作者：小小明,「快学Pthon」专栏作者先说需求：PDF文件结构都一致，对于下图红框区域截图并提取文本 ?...通过PyMuPDF实现区域截图和区域文字提取官方文档：https://pymupdf.readthedocs.io/en/latest/index.html Github：https://github.com...- page.getPixmap传入放大系数和区域即可获取图片对象，可直接获取图片的数据也可以写入到文件保存起来再测试截取右上角部分： ```python clip = fitz.Rect(0.8...https://img-blog.csdnimg.cn/img_convert/a759983bd8b9da691e1572f310b673c8.png) mat.preRotate\(-90\)实现了截取区域逆时针旋转...保存图片很简单，只需调用write.write# 文字提取通过fitz.Rect要提取文字的区域即可： ```python a_text = page.getText(clip=clip) print

4.4K1 0

在JS数组指定位置插入元素

方法实例 //在数组指定位置插入 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi...( array_1.unshift(1,2) + '' ); document.write( array_1 ); 运行该例子，输出： 5 1,2,a,b,c 注意在...实例例子 1 在本例中，我们将把 concat() 中的参数连接到数组 a 中： var a = [1,2,3]; document.write...( a.concat(4,5) ); 输出： 1,2,3,4,5 例子 2 在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来： <script type...Martin" document.write( arr.concat(arr2) ) 输出： George,John,Thomas,James,Adrew,Martin 例子 3 在本例中

6.2K0 0

js判断元素在某个区域内是否可见（转）

Y =this.getBoundingClientRect().top+document.documentElement.scrollTop; getBoundingClientRect判断元素是否在可视区域...getBoundingClientRect是获取可视区域相关位置信息的，使用这个属性来判断更加方便： function isElementInViewport (el) { var rect =...caniuse 参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect https://div.io

7.6K2 0

图像裁剪库Cropper.js的学习使用

以下是一些关键特点：简单易用：用户可以通过拖动和缩放来选择裁剪区域，操作直观。多种裁剪模式：支持自由裁剪、固定比例裁剪、圆形裁剪等。...Cropper.js 在图像处理、用户头像上传等场景中非常实用，广泛应用于各类网站和应用中。 2. 基础使用今天我们要做就是一个这样的Demo....2.6 拖动模式 js dragMode: 'move', // 拖动模式 'crop' : 创建一个新的裁剪框（默认）。...2.9 自动裁剪和裁剪区域大小 js autoCrop: true, // 启用自动裁剪 autoCropArea: 0.8, // 自动裁剪区域大小（百分比）这可以在初始化时自动创建裁剪框，并允许您设置裁剪框的初始大小...encoderOptions：一个在指定图片格式为 'image/jpeg' 或 'image/webp' 时可用的参数，它代表图片的质量，范围从 0 到 1，其中 1 表示最高质量。

5911 0

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

div class="data-view"> 在下面区域拖动字段 div class="view">...默认为false swapThreshold 选项交换区域将占据的目标百分比，介于0和之间1 invertSwap 选项设置为true，将交换区域设置在目标的侧面，以实现“在项目之间”排序的效果 ?...要允许选择文本，请定义一个拖动处理程序，该处理程序是每个列表元素都可以拖动的区域 Sortable.create(el, { handle: ".my-handle" }); <span...fallbackTolerance 选项模拟本地拖动阈值。指定以像素为单位的鼠标在被视为拖动之前应移动的距离。如果项目也可以单击，例如在链接列表中，则很有用。...当用户在可排序元素内单击时，在按下和松开之间，您的手通常会略微移动。仅当您将指针移过一定的公差时才开始拖动，这样您就不会在每次单击时意外开始拖动。

7.1K1 0

ExtJs学习笔记(24)-DragDrop拖动功能

直接给代码吧，主要重点已经在代码里注释了 Code 拖动源的group:dd相同 //只有相同group的DDProxy/DragSource才会接受) }); div> div...div id="target" class="block">把上面有颜色的色块拖到我这里试试div> 看下效果图: 1.拖动Green块(但还未到达目标区...proxy_red") { destEl.dom.style.border = "solid #000 1px"; alert("此区域仅接受...">把上面有颜色的色块拖到我这里试试div> div id="target2" class="block">把上面有颜色的色块拖到我这里试试(此区域仅接受红色块)div> </

9249 0

【JS】1724- 重学 JavaScript API - Drag and Drop API

这里介绍几个常见的使用场景：相册应用中，用户可以拖动图片到不同的分组或标签中进行分类；项目任务管理应用中，用户可以拖动任务卡片进行排序或分组；文件上传功能中，用户可以将文件拖动到指定区域进行上传；...如何使用使用拖放 API 主要包括以下 3 个步骤：「定义可拖拽的（draggable）元素」：将需要拖动的元素标记为可拖拽，并指定相应的事件处理逻辑。...「定义可放置的（droppable）元素」：将用来放置被拖动元素的目标区元素标记为可放置，并指定相应的事件处理逻辑。...实际应用拖放 API 在实际应用中有许多用途。下面是一些常见的实际应用场景： 3.1 图片库应用程序在相册应用中，用户可以拖动图片到不同的分组或标签中进行分类和管理。...在放置目标容器上，我们使用 dragover 事件阻止默认行为并添加一些过渡样式，使用 dragleave 事件移除过渡样式，使用 drop 事件在放置目标容器中追加拖动的图片元素。

2982 0

手写实战应用：Vue拖拽插件的应用与选择

大家好,我是程序视点的小二哥因为项目上有一个在规定区域内自由拖拽的小需求，自己纯js写又有点小麻烦，就花了点时间寻找到这个小组件。...，并且要给父容器设置相对定位，否则拖动元素将会自动相对于视图窗口定位拖动元素默认宽高是200pxw可以设置元素的宽，设置时不需要带单位，如果设置auto则为组件内部内容的宽度h是高x表示相对于父元素在x...限制拖拽范围如果不设置拖拽范围，可以在整个页面进行拖拽图片可以使用parent-limitation限制只在父元素内拖动也可以手动设置拖拽范围的宽高parentW,parentH//指定只在父元素内拖动... { display：none； } 拖拽的层级vue-drag-resize的层级默认是第一个元素最小，然后依次递增图片项目有个要求：当拖动元素时，始终保持拖动的元素在最上层，此时就需要监听拖动元素...，把当前元素设置为最高级使用@clicked事件监听，当点击拖动元素时，可以传如此元素的索引，把此元素的层级设置为最高，其他的设置为最低 div class="father"

4133 0

原生JS实现可拖拽登录框

分享一个用原生JS实现的可拖拽登录框，效果如下：实现的代码如下：原生JS...function fillToBody(el) { //设置当前元素的宽度和高度为可视区域的宽和高 el.style.width =...el.style.height = document.documentElement.clientHeight + 'px'; } //设定鼠标在X...if (isDraging === true) { //拖动元素的位置等于鼠标相对于页面位置减去鼠标相对于拖动元素左上角的位置

4.4K2 0

基于Vue的拖拽插件的实战应用，但最后我还是选择了手写

大家好,我是前端实验室的大师兄因为项目上有一个在规定区域内自由拖拽的小需求，自己纯js写又有点小麻烦，就花了点时间寻找到这个小组件。...，并且要给父容器设置相对定位，否则拖动元素将会自动相对于视图窗口定位拖动元素默认宽高是200px w可以设置元素的宽，设置时不需要带单位，如果设置auto则为组件内部内容的宽度 h是高 x表示相对于父元素在...限制拖拽范围如果不设置拖拽范围，可以在整个页面进行拖拽可以使用parent-limitation限制只在父元素内拖动也可以手动设置拖拽范围的宽高parentW,parentH //指定只在父元素内拖动...：none； } 拖拽的层级 vue-drag-resize的层级默认是第一个元素最小，然后依次递增项目有个要求：当拖动元素时，始终保持拖动的元素在最上层，此时就需要监听拖动元素，把当前元素设置为最高级...使用@clicked事件监听，当点击拖动元素时，可以传如此元素的索引，把此元素的层级设置为最高，其他的设置为最低 div class="father" > <VueDragResize

1.8K6 0

【实战技巧】VUE3.0实现简易的可拖放列表排序

拖拽事件可用的拖拽事件一共有七个，其中三个是用于拖拽元素的 dragstart 在元素开始被拖动时触发 dragend 在拖动操作完成时触发 drag 在元素被拖动时触发四个是用于释放区域的 dragenter...当被拖动元素进入到释放区所占据的屏幕空间时触发 dragover 当被拖动元素在释放区内移动时触发 dragleave 当被拖动元素没有放下就离开释放区时触发 drop 当被拖动元素在释放区里放下时触发步骤..." draggable="true">div> div> div class="box" id='box2'> div> ((doc) =...中的实现思路原生js实现拖拽排序我还没有弄，但是在vue中就非常的简单，因为我们在触发任何事件的时候，都可以拿到元素的index,我们可以靠index轻易实现。...在dragstart中记录下旧的索引在dragover中记录下新的索引,每次经过一个都会更新在drop事件中处理数组,删掉旧的元素,在目标索引添加新的元素 //简略后的伪代码详情请查看源码 div

2.1K4 0

HTML5绘画与拖放事件

进行绘画：由于我们是做后端开发的，所以在这里只简单介绍一下html5中的2D绘画，绘画的制作都是基于canvas标签的，所以先介绍一下canvas标签： canvas是一个画布，这个画布通常是一个矩形区域...虽然绘画基于canvas，但是canvas本身并没有绘制能力，它仅仅是图形的容器，必须使用js脚本来完成实际的绘图任务。通过 JavaScript 来绘制： canvas 元素本身是没有绘图能力的。...绘制线条：通过指定从何处开始，在何处结束，来绘制一条线：代码示例： ? 运行结果： ? 绘制圆形：通过规定尺寸、颜色和位置，来绘制一个圆：代码示例： ? 运行结果： ?...绘制渐变颜色：使用指定的颜色来绘制渐变背景：代码示例： ? 运行结果： ? 图像：把图像放置到画布上：代码示例： ? 运行结果： ?...设置元素为可拖动：为了使元素可拖动，需要把元素中的 draggable 属性设置为 true ，img元素是默认可拖动的，例如我把div设置为可拖动： ? 运行结果，可以看到能够将div拖动： ?

3K3 0

【汉诺塔】小游戏开发教程

: -1,// 当前拖动圆环在原柱子上的索引 dragColumnIndex: -1,// 当前拖动圆环所在柱子的索引 draging: false,// 当前是否是拖动中 startPos...e.clientX - this.startPos.x this.dragPos.y = e.clientY - this.startPos.y } } 鼠标松开事件是最重要的，在该函数里需要判断圆环是否拖动到某个柱子区域内及能否落下及具体的落下操作...2.圆环的顶部距窗口顶部的距离小于柱子区域的底部距窗口顶部的距离、同时圆环的底部距窗口顶部的距离大于柱子区域顶部距窗口顶部的距离翻译成代码如下： { // 检查某个圆环的位置是否在某个柱子区域内...，在移动过程中不断检测是否相交，是的话就给对应的区域加上背景的类名： div class="container"> div class="column" v-for="...> div> { data() { return { dragingColumnIndex: -1//拖动过程中实时相交的区域索引

1.9K1 0

SortableJS vue.draggable.next 使用笔记，持续记录

>{{element.name}}div> div class="icon"> 指定作为key的键名。 tag，指定外部标签名。 handle，指定#item内，触发拖动的选择器。 move，移动过程中触发的函数。...#item，内容区域的插槽，参数{element，index} #header，#footer，顶部和底部不触发拖动的区域元素各种方法完整参数说明：https://github.com/SortableJS...当使用forceFallback时，指定拖动元素fallbackClass的样式类。...fallbackOnBody: false, 用于指定是否将append的元素添加到body下面，不指定时，将复制到被拖动元素的同一层级

1K2 0

使用 React-DnD 打造简易低代码平台

end collect 用于获得拖动状态的状态，可以设置样式低代码实现回到我们的低代码主题，我们来一起看下钉钉宜搭的页面设计主要分为3个区域：左侧组件区、中间设计区、右侧编辑区。...定义 JSON 接下来我们要：定义可拖动的组件类型每个组件类型对应的渲染组件每个组件的属性设置先来定义几个可拖动的字段吧，比如最基本的数据类型，div、h1、 p 标签都是一个组件，那就我先定义出以下字段类型...右侧区域的也可以配置不同的组件，比如 Text 就渲染成最简单的 Input。...在放置的组件，然后操作数据 export const traverse = 在评论区交流你的想法和心得，欢迎一起探索前端。

6.2K2 0

手写原生代码专题 | 图片拖拽效果（一）

二、图片拖拽效果介绍本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色...，提示用户可以在此位置放置被拖动的图片，结束拖动时（松开鼠标时），图片将会放置在目标方格内。...三、拖拽相关知识复习在练习前，我们先复习下和拖拽相关的几个API事件，在某个元素被拖动时，会按照顺序触发以下事件： dragstart（按住鼠标不放，刚开始拖动元素时，就会触发 dragstart 事件...，则会触发drop事件）四、开始编写代码复习完基础知识后，我们来开始动手实践吧，我们依次创建3个文件 index.html，style.css，script.js，然后在 index.html 文件里引入样式和脚本文件...1、编写HTML代码 html代码文件比较简单，我们依次创建5个div方格，并将被拖动的图片元素容器初始化放置在第一个方格内，并在元素上添加可拖动属性 draggable 值为 true，表示此元素可被拖动

2.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云