首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何防止在droppable div之外拖拽(移动)元素?(仅限Vanila JS )

在Vanila JS中,可以通过以下步骤来防止在droppable div之外拖拽(移动)元素:

  1. 获取所有的可拖拽元素和目标容器(droppable div)。
  2. 为可拖拽元素添加dragstart事件监听器,以便在开始拖动时执行相应的操作。
  3. 在dragstart事件处理程序中,使用event.dataTransfer.setData()方法设置数据类型和数据值。这将允许我们在拖动过程中传递数据。
  4. 为目标容器添加dragover事件监听器,以便在拖动元素在其上方时执行相应的操作。
  5. 在dragover事件处理程序中,使用event.preventDefault()方法阻止默认的拖放行为。
  6. 在dragover事件处理程序中,使用event.dataTransfer.types属性检查拖动元素的数据类型。如果数据类型与预期不符,则阻止拖放行为。
  7. 在目标容器上添加drop事件监听器,以便在元素被释放到容器中时执行相应的操作。
  8. 在drop事件处理程序中,使用event.preventDefault()方法阻止默认的拖放行为。
  9. 在drop事件处理程序中,使用event.dataTransfer.getData()方法获取拖动元素的数据值,并根据需要执行相应的操作。

以下是一个示例代码:

代码语言:txt
复制
// 获取可拖拽元素和目标容器
const draggableElement = document.getElementById('draggable');
const droppableElement = document.getElementById('droppable');

// 添加dragstart事件监听器
draggableElement.addEventListener('dragstart', (event) => {
  // 设置数据类型和数据值
  event.dataTransfer.setData('text/plain', event.target.id);
});

// 添加dragover事件监听器
droppableElement.addEventListener('dragover', (event) => {
  // 阻止默认的拖放行为
  event.preventDefault();
  
  // 检查拖动元素的数据类型
  if (event.dataTransfer.types.includes('text/plain')) {
    // 允许拖放
    droppableElement.classList.add('dragover');
  } else {
    // 不允许拖放
    droppableElement.classList.remove('dragover');
  }
});

// 添加drop事件监听器
droppableElement.addEventListener('drop', (event) => {
  // 阻止默认的拖放行为
  event.preventDefault();
  
  // 获取拖动元素的数据值
  const draggableId = event.dataTransfer.getData('text/plain');
  
  // 执行相应的操作
  const draggableElement = document.getElementById(draggableId);
  droppableElement.appendChild(draggableElement);
  
  // 移除拖放样式
  droppableElement.classList.remove('dragover');
});

在上述示例中,我们使用了dragstart、dragover和drop事件来实现拖放操作。通过检查拖动元素的数据类型,我们可以防止在droppable div之外拖拽(移动)元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Hooks + TS 搭建一个任务管理系统(八)-- 拖拽功能实现

官网 关于这个库的使用呢,我们简单的介绍一下,首先我们需要定义一个 Droppable 组件来包裹我们的拖拽元素,表示这块区域的内容我们能够拖拽,其次需要对放的地方,也就是我们的元素添加一个 Draggable...placeholder} ) 1.... HTML5 中新增的 Drop 和 Drag 当我们需要设置某个元素可拖放时,只需要 draggable 设置为 true 当拖放执行时,会发生 ondragstart...("Text",ev.target.id); } 这里的 Text 时我们需要添加到 drag object 中的数据类型 何处放置被拖动的数据 默认地,无法将数据/元素放置到其他元素中。...被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 (参考于菜鸟教程) 可以亲自试一试:在线演示 总结 大概了解了一下如何使用 react-beautiful-dnd

57830

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

通过拖放 API,我们可以实现将可拖拽(draggable)元素拖动到另一个可放置(droppable元素,以及实现交互式的拖放体验。...如何使用 使用拖放 API 主要包括以下 3 个步骤: 「定义可拖拽的(draggable)元素」:将需要拖动的元素标记为可拖拽,并指定相应的事件处理逻辑。...「定义可放置的(droppable元素」:将用来放置被拖动元素的目标区元素标记为可放置,并指定相应的事件处理逻辑。...下面是一个简单的示例代码,演示了如何使用拖放 API : // 定义可拖拽元素 const dragSource = document.getElementById("drag-source"); dragSource.addEventListener...注意性能问题,特别是处理大量拖放元素时。 考虑移动设备上的触摸操作,确保拖放功能在移动设备上的可用性和易用性。 提供适当的视觉反馈和指导,以帮助用户理解和使用拖放功能。

20820

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

例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable元素,并释放鼠标按钮以放置这些元素拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。...拖拽事件 可用的拖拽事件一共有七个,其中三个是用于拖拽元素的 dragstart 元素开始被拖动时触发 dragend 拖动操作完成时触发 drag 元素被拖动时触发 四个是用于释放区域的 dragenter...当被拖动元素进入到释放区所占据的屏幕空间时触发 dragover 当被拖动元素释放区内移动时触发 dragleave 当被拖动元素没有放下就离开释放区时触发 drop 当被拖动元素释放区里放下时触发步骤...中的实现思路 原生js实现拖拽排序我还没有弄,但是vue中就非常的简单,因为我们触发任何事件的时候,都可以拿到元素的index,我们可以靠index轻易实现。...dragstart中记录下旧的索引 dragover中记录下新的索引,每次经过一个都会更新 drop事件中处理数组,删掉旧的元素,目标索引添加新的元素 //简略后的伪代码 详情请查看源码 <div

1.9K40

《手把手教你》系列技巧篇(三十)-java+ selenium自动化测试- Actions的相关操作下篇(详解教程)

2.拖拽操作   鼠标拖拽操作,顾名思义就是:就是鼠标按住将一个元素拖拽到另一个元素上。...,target-拖动元素A到达的目标元素B action.dragAndDrop(source, target); //source-要拖动的元素A,拖动元素移动多少,标准以元素A左上角为准,拖动元素相对元素...A和元素B WebElement A = driver.findElement(By.xpath("//*[@id=\"ext-gen153\"]/li[1]/div")); WebElement B=...当然了,这个一些网站的登录也需要滑块验证等。 selenium中提供了ActionChains类来处理鼠标事件。这个类中有2个方法和滑块移动过程相关。...元素,然后执行鼠标移动动作 (mouse move), 移动到 target 元素位置或者是 (xOffset, yOffset) 位置,再执行鼠标的释放动作 (mouse release)。

1.3K30

react-grid-layout 之核心代码分析与实践

开始拖拽事件中,做了以下事情: 获取当前拖拽元素 获取最近祖先元素中含有定位属性元素 获取以上两种元素的定位信息 首先如何获取当前拖拽元素?...第二步如何获取最近祖先元素中含有定位属性元素?...实际使用拖拽功能时,会有当前拖动元素的阴影站位,如下图11号元素如何实现拖拽过程中的阴影?...我们使用 GRL 渲染子元素时可以添加拖动时的类名例如.droppable-element,并给类目设置样式 .droppable-element { ......RGL 默认会添加过渡动画效果来实现平滑的移动效果 z-index: 3; // 保证拖拽元素顶部,不被其他元素覆盖 will-change: transform; // 提示浏览器被拖拽元素将要发生的变化

85020

使用selenium轻松实现元素拖拽

元素拖拽功能的重要性许多Web应用程序中,用户可以通过拖拽操作来调整页面布局、拖拽元素到指定位置或执行其他交互动作。因此,测试这些功能的正确性和稳定性就变得至关重要。...通过Selenium实现元素拖拽功能,我们可以确保自动化测试中覆盖到这些关键功能,同时也可以自动化脚本中模拟用户真实的交互行为。...如何实现元素拖拽Selenium提供了ActionChains类来模拟用户的行为,包括元素拖拽。...使用示例让我们来看一个实际的应用场景:如何通过拖拽元素来改变页面布局。假设我们有一个页面上有两个可以拖拽元素,通过拖拽这两个元素可以调整它们的位置,从而改变页面的布局。...我们通过click_and_hold方法按住要拖拽元素,然后使用move_to_element方法将其移动拖拽目标元素的位置,最后释放鼠标按钮以完成拖拽操作。

12810

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

低代码即无需代码或只需要通过少量代码,通过“拖拽”的方式即可快速生成应用程序。那么对于开发者而言,我们应该如何入手开发呢?...“拖拽”实现 关键词就是“拖拽”,其实“拖拽”的交互方式早在 Jquery 时代就有,关于拖拽在前端实现主要分为 2 种 是以 jquery-ui 为代表的 draggable 和 Droppable...ev.dataTransfer.dropEffect = "move" } function drop_handler(ev) { ev.preventDefault(); // 获取目标的 id 并将已移动元素添加到目标的...放置的组件,然后操作数据 export const traverse = <T extends { children?...希望这篇文章对大家有所帮助,也可以参考我往期的文章或者评论区交流你的想法和心得,欢迎一起探索前端。

5.7K20

【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件

移动鼠标到一个可放置的(droppable元素,然后释放鼠标。 ...操作期间,会触发一系列的拖放类型的事件 其中我们主要关心的事件有三个: 1. ondragstart 发生在可拖拽(draggable)的元素上, 元素被拖动的时候调用 2. ondragover...发生在可放置(droppable)的元素上, 当某被拖动的对象可放置对象范围内(上方)时触发此事件 3. ondrop  发生在可放置(droppable)的元素上,当释放鼠标使可拖拽元素“放进”可放置元素内的瞬间触发...如何使得被拖拽元素拖拽?(因为元素默认的行为是不可拖拽的),以及如何使得被放置的容器元素可放置?...appendChild之类的API实现添加被拖拽元素,从而模拟整个拖拽的过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素的数据(如id)—容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据

3.7K100

【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

移动鼠标到一个可放置的(droppable元素,然后释放鼠标。 ...操作期间,会触发一系列的拖放类型的事件 其中我们主要关心的事件有三个: 1. ondragstart 发生在可拖拽(draggable)的元素上, 元素被拖动的时候调用 2. ondragover...发生在可放置(droppable)的元素上, 当某被拖动的对象可放置对象范围内(上方)时触发此事件 3. ondrop  发生在可放置(droppable)的元素上,当释放鼠标使可拖拽元素“放进”可放置元素内的瞬间触发...如何使得被拖拽元素拖拽?(因为元素默认的行为是不可拖拽的),以及如何使得被放置的容器元素可放置?...appendChild之类的API实现添加被拖拽元素,从而模拟整个拖拽的过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素的数据(如id)—容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据

3.1K30

dragula插件web端和移动端的拖拽排序

Dragula简介 Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单,浏览器兼容性好,能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。...class='shuffle-item'>test 3 test 4 dragula.js 和 dragula.css...npm install dragula –save bower install dragula.js –save 使用方法 该元素拖动插件提供了一个最简单的API来让你可以页面中拖放元素。...如果元素被放置containers列表元素之外,插件将取消revertOnSpill和removeOnSpill选项。 注意:拖拽事件只会发生在用户鼠标左键点击的时候,并且没有meta键被按下。...设置revertOnSpill为true将确保元素拖放到容器之外时会被重新放置会拖放的开始位置。

2.3K10

彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

解决方案 只需要实时计算拖拽元素边框距离上下左右屏幕之间的距离就行了,具体代码如下: code: <!...---- 二、基于HTML5拖拽API的拖拽 前序知识介绍   一个典型的拖拽操作是这样的:用户用鼠标选中一个可拖动的(draggable)元素移动鼠标到一个可放置的(droppable元素,然后释放鼠标...这里涉及几个知识点: 可拖动元素: 又称为源对象,是指我们鼠标点击之后准备拖动的对象(图片、div、文字等) 可放置元素: 又称为目标对象,是指可以放置源对象的区域 事件:...Event On Event Handler Description drag ondrag 当拖动元素或选中的文本时触发 dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲...当用户开始拖动一个元素或选中的文本时触发 drop ondrop 当元素或选中的文本可释放目标上被释放时触发 ps:当从操作系统向浏览器中拖动文件时,不会触发dragstart 和dragend

3.1K30

JavaScript进阶之实现拖拽

之前我们来实现原生拖拽 原生实现拖拽 Mouse事件实现拖拽 h5之前,原生实现拖拽是根据Mouse事件来实现的,需要用到以下这三个事件mousedown,mouseup,mousemove mousedown...mouseup事件指针设备按钮抬起时触发。 当指针设备( 通常指鼠标 )元素移动时, mousemove 事件被触发。 JavaScript三大家族 ? ? 明白了上述?...一个典型的drag操作是这样开始的:用户用鼠标选中一个可拖动的(draggable)元素移动鼠标到一个可放置的(droppable元素,然后释放鼠标。...draggable 属性:就是标签元素要设置draggable=true ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件...,此事件作用在目标元素上 ondragover 事件:拖拽元素目标元素移动的时候触发的事件,此事件作用在目标元素上 ondrop 事件:被拖拽元素目标元素上同时鼠标放开触发的事件,此事件作用在目标元素

2.6K40

关于VUE3+TS利用递归组件完成TreeList的设计与实现

效果如下: 实现拖拽之前,我们需要了解一些基础问题 draggable draggable 属性规定元素是否可拖动。...3、dragover 当元素或者选择的文本被拖拽到一个有效的放置目标上时触发 4、dragleave当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时触发 5、drop 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时触发...dragleave当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时触发 这俩是一对 ,一个移入一个移出,值得注意的是dragEnter 发生在 dragLeave 之前 并且如果 移动到子元素...,这两个事件会再次执行,于是我们需要做特殊处理 // 保存最新的进入节点, 为了解决移动到子元素,这两个事件会再次执问题 let lastenter = null const dragEnter =..., 拖拽中做响应的判断,为了拿到正确的组件数据 举个例子,我移动到一个文件中,那么我就需要向上寻找,找到上级文件夹,再去抛出事件 所以我们有了emit('setDragFolder') 来找到上级文件夹

3.1K20

爬虫selenium+chromdriver

#1、selenium只是模拟浏览器的行为,而浏览器解析页面是需要时间的(执行css,js),一些元素可能需要过一段时间才能加载出来,为了保证能查找到元素,必须等待 #2、等待的方式分两种: wait...target=browser.find_element_by_id('droppable')#找到拖拽的目标标签 action_chains.drag_and_drop(source,target)...(on_element=None) ——点击鼠标右键 double_click(on_element=None) ——双击鼠标左键 drag_and_drop(source, target) ——拖拽到某个元素然后松开...(to_element) ——鼠标移动到某个元素 move_to_element_with_offset(to_element, xoffset, yoffset) ——移动到距某个元素(左上角坐标)...多少距离的位置 perform() ——执行链中的所有动作 release(on_element=None) ——某个元素位置松开鼠标左键 send_keys(*keys_to_send) ——

2.3K20

通过 JS 实现简单的拖拽功能并且可以特定元素上禁止拖拽

前言 关于讲解 JS拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。...拖拽实现 关于拖拽功能不再啰嗦,直接贴代码 /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle...排除特定元素的方法 关于如何排除特定元素的方法,很多人会推荐阻止冒泡的方法,但是我试了很多次,这种方法是不行的,因为拖拽事件绑定在了 document 对象上。...因为我们排除特定元素的同时也要排除它的子元素。如果使用原生 JS 的话,需要添加获取子元素的方法。...以下是完整代码: /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle [拖拽元素]

4.7K90

前端学习(4)~html5详解(二)

HTML5的规范中,我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启拖拽的。...目标元素的事件监听:(应用于目标元素) ondragenter 当拖拽元素进入时调用 ondragover 当拖拽元素停留在目标元素上时,就会连续一直触发(不管拖拽元素此时是移动还是不动的状态)...} // 当拖拽元素 目标元素上时,连续触发 two.ondragover = function (e) { //阻止拖拽事件的默认行为 e.preventDefault...总结:如果想让拖拽元素目标元素里做点事情,就必须要在 ondragover() 里加event.preventDefault()这一行代码。 案例:拖拽练习 完整版代码: <!...(2)Wi-Fi定位:仅限于室内。 (3)手机信号定位:通过运营商的信号塔定位。 3、用户自定义数据: 对不同获取方式的优缺点进行了比较,浏览器会自动以最优方式去获取用户地理信息: ?

69500
领券