开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何知道哪个类的draggable已被拖动

在前端开发中，可以通过监听drag事件来判断哪个类的draggable已被拖动。当元素被拖动时，会触发dragstart事件，我们可以在该事件中获取被拖动元素的类名或其他标识符。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .draggable {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="draggable" draggable="true"></div>
  <div class="draggable" draggable="true"></div>
  <div class="draggable" draggable="true"></div>

  <script>
    const draggableElements = document.querySelectorAll('.draggable');

    draggableElements.forEach(element => {
      element.addEventListener('dragstart', handleDragStart);
    });

    function handleDragStart(event) {
      const draggedElement = event.target;
      const draggedElementClass = draggedElement.className;

      console.log(`拖动的元素类名：${draggedElementClass}`);
    }
  </script>
</body>
</html>

在上述代码中，我们创建了三个具有相同类名的可拖动元素。当拖动其中一个元素时，会在控制台输出拖动元素的类名。

这里没有提及具体的云计算相关内容，因为该问题与云计算领域无关。如果您有其他关于云计算的问题，我将很乐意为您解答。

相关搜索:AllenNLP:如何知道输出张量的哪个索引对应于哪个类 Gradle -我如何知道哪个插件是从哪个插件引入的？Laravel如何知道类的路径如何使用react-draggable将被拖动的元件重置到其原始位置？如何在Flutter中使用Draggable拖动堆栈中的元素？如何知道使用的是哪个哈希值如何知道列表中的所有项目是否都已被检查如何知道哪个OpenCV版本是稳定的？如何知道哪个函数与rstats中的哪个包关联如何知道哪个分机在呼叫星号中的哪个分机？

相关搜索:

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

有帮助

没帮助

相关·内容

我被一个拖拽难住了？

最终的处理方案变成，在拖动某个组件时，全局中增加一个标识标识正在拖动的是哪个组件，然后在放置组件后清除这个缓存。... <div class="<em>draggable</em>-item" :draggable="true" @dragstart="dragStart" @dragend="...dragstart,dragend 在目标元素上触发，也就是在拖动的元素上触发。...dragenter,dragover,dragleave,drop在目标放置区域触发，也就是你需要将拖动的元素放到哪个区域，这些个方法就在那个区域触发。...原因有以下几点: 一、无法考虑到具体的业务场景，似乎也可以说是不知道如何将需求变现的一个过程。二、技术限制。

5731 0

如何使图像在 HTML 中可拖动？

通过使用鼠标或触摸动作，用户将能够在页面上拖动图像或其他内容。在本文中，我们将了解如何在 HTML5 中构建可拖动的图像。使任何 HTML5 元素（包括照片）都可拖动很简单。使用了“可拖动”功能。...浏览器确定属性是否可拖动。如果该值设置为 true，则图像是可拖动的。如果该值设置为 false，则图片不可拖动。html 中的 draggable 属性draggable 属性指示是否可以移动元素。...可以将此属性添加到标签中，例如标签语法属性值true − 表示可拖动的 truefalse − 表示可拖动的 false...第 5 步 - 要使图像可拖动，请使用 draggable 属性并将其设置为 true。例<！...也就是说，默认情况下它们是可拖动的。结论本文提供了一种基于 Java 编程语言的解决方案，用于查找和报告数组中所有重复数字及其频率的问题。对于这个问题，两种不同的策略已被证明是有效的。

5051 0

draggable的用法_draggable

大家好，又见面了，我是你们的朋友全栈君。一、概述通过前面几节学习，大家应该都知道了，一个div对象是可以通过拖拉来改变大小，也可以通过拖动来改变其位置的。...如何改变大小已经讲解过了，那么怎么实现拖动改变位置呢？现在就开始讲解如何实现拖动 — Draggable。...(){ 3: $(".block").draggable({ 4: //helper: "clone", //拖动时克隆,默认是 original...top:10}, //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框，单位px 9: opacity: 0.40, //设置对象被拖动时的透明度...//拖动时执行的函数 18: stop:function(e,ui){} //拖动停止执行的函数 19: }).resizable(); 20: 21

1K2 0

draggable 属性原

项目需求是做一个spliter,拖动后调整左右两边的布局大小！...浏览器中，每个元素都可以拖动，默认是draggable="auto".此时它们的行为是浏览器赋予的，默认情况是：只有选中文本，图片，超链接是可以被拖动，并且拖动后，会把它的“值/链接地址”赋予拖动的事件中去...如要普通元素可以拖动，只需要增加 draggable="true" 的属性。经测试在IE,CHROME中，它是正常的，拖动时，会有一个浅的影子跟随！... 你可以试试拖动我！但firefox浏览器下，却没反应！...去MDN上查一下说明，才知道，标准规定，须满足以下情况才行： 1、增加draggable属性 2、添加dragstart事件并设置drag data的值 <div draggable="true"

6491 0

你知道 Java 类是如何被加载的吗？

不过贸然的向别人解释双亲委派模型是不妥的，如果在不了解 JVM 的类加载机制的情况下，又如何能很好的理解“不同 ClassLoader 加载的类是互相隔离的”这句话呢？...所以为了理解双亲委派，最好的方式，就是先了解下 ClassLoader 的加载流程。 Java 类是如何被加载的 2.1：何时加载类我们首先要清楚的是，Java 类何时会被加载？...《深入理解 Java 虚拟机》给出的答案是：遇到 new、getstatic、putstatic 等指令时。对类进行反射调用的时候。初始化某个类的子类的时候。...虚拟机启动时会先加载设置的程序主类。使用 JDK 1.7 的动态语言支持的时候。其实要我说，最通俗易懂的答案就是：当运行过程中需要这个类的时候。那么我们不妨就从如何加载类开始说起。...，要知道，这个大小在Class 文件编译后就被确定了。

1.1K2 0

你知道 Java 类是如何被加载的吗？

不过贸然的向别人解释双亲委派模型是不妥的，如果在不了解 JVM 的类加载机制的情况下，又如何能很好的理解“不同 ClassLoader 加载的类是互相隔离的”这句话呢？...所以为了理解双亲委派，最好的方式，就是先了解下 ClassLoader 的加载流程。 Java 类是如何被加载的 2.1：何时加载类我们首先要清楚的是，Java 类何时会被加载？...《深入理解 Java 虚拟机》给出的答案是：遇到 new、getstatic、putstatic 等指令时。对类进行反射调用的时候。初始化某个类的子类的时候。...虚拟机启动时会先加载设置的程序主类。使用 JDK 1.7 的动态语言支持的时候。其实要我说，最通俗易懂的答案就是：当运行过程中需要这个类的时候。那么我们不妨就从如何加载类开始说起。...，要知道，这个大小在Class 文件编译后就被确定了。

7743 0

HTML5 拖放API与Vue.js实战

当用户将鼠标移到可拖动元素上时，拖动操作开始，然后将元素移动到启用拖放的元素上。再默认情况下，唯一可拖动的 HTML 元素是图像和链接。...为了使其他元素可拖动，需要通过将 draggable 属性添加到元素；也可以在 JavaScript 中选择元素并将 draggable 属性设置为 true 来显式创建功能。...使卡片可拖动需要执行以下操作才能使卡组件可拖动：将 draggable 属性设置为 true 用 DataTransfer 对象设置要传输的数据应该先把 draggable 设置为 true，根据...最后，将 card 的透明度降低到 0.2 ，以便向用户提供一些反馈，表明该卡实际上已被拉出其原始位置。拖动完成后，再把透明度恢复为 1。现在可以拖动卡片了。接下来添加放置目标。...总结在本文中，我们介绍了什么是 HTML 5 拖放 API ，如何使用，以及如何在 Vue.js 中实现。拖放功能也可以在其他前端框架和原生 JavaScript 中使用。

4.3K1 0

HTML5 drag和drop的亲手实践

draggable属性: 如果你想让一个元素变得可以拖曳的话，那么你就必须设置它的draggable=true，如下 </div...:设置或返回被拖动元素允许发生的拖动行为。...(ev.target) targetOffsetTop = ev.target.offsetTop ev.dataTransfer.effectAllowed = 'move' } // 找到类名为...，为目标对象增加一个dotted类。...当ondragleave事件触发的时候，则把dotted类从目标对象移除。 // 当被拖动元素在悬挂元素上移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。

9283 0

低代码设计器的自由布局拖动的实现原理

如何使元素支持拖动实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。...属性值如下所示： true：规定元素的可拖动的 false：规定元素不可拖动 auto：使用浏览器的默认行为当我们在元素元素标签中添加 draggable 属性时，该元素就可以进行拖动操作了。... 可拖动的元素复制代码拖动事件事件分类元素可以进行拖动了，我们就可以通过元素的拖动事件进行拖动开始-结束的一些逻辑控制了，拖动事件主要分为两个类别...，一类是拖动元素可以触发的： dragstart：鼠标点中元素并且开始移动时触发 drag：拖拽过程中持续触发 dragend：拖拽结束松开鼠标时触发另一类是，是当拖拽元素到某个目标元素时，目标元素会触发的...那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？

4K3 0

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

Github：https://github.com/SortableJS/vue.draggable.next，完整代码如下： <draggable v-model="myArray"...item-key，指定作为key的键名。 tag，指定外部标签名。 handle，指定#item内，触发拖动的选择器。 move，移动过程中触发的函数。...ghostClass，拖动时下方元素添加的类。 dragClass，拖动元素添加的类 selectedClass，选中元素的类。...当使用forceFallback时，指定拖动元素fallbackClass的样式类。...fallbackOnBody: false, 用于指定是否将append的元素添加到body下面，不指定时，将复制到被拖动元素的同一层级

9082 0

（四）原生 WEB 拖动排序

使用原生的拖动排序在我们网页开发中经常需要做拖动排序源码 1 2 <div draggable...e.target.classList.add('moving') }, 0) onElment = e.target // 给拖动的默认行为变为拖动...|| e.target === onElment) return // 调用 Array.forem 来将一个类数组转换成一个真正的数组 const children...if (sourceIndex < targetIndex) { console.log('向下拖动') // 向下拖动给他放到覆盖元素的下面

6441 0

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

通过拖放 API，我们可以实现将可拖拽（draggable）元素拖动到另一个可放置（droppable）元素，以及实现交互式的拖放体验。...这里介绍几个常见的使用场景：相册应用中，用户可以拖动图片到不同的分组或标签中进行分类；项目任务管理应用中，用户可以拖动任务卡片进行排序或分组；文件上传功能中，用户可以将文件拖动到指定区域进行上传；...如何使用使用拖放 API 主要包括以下 3 个步骤：「定义可拖拽的（draggable）元素」：将需要拖动的元素标记为可拖拽，并指定相应的事件处理逻辑。...下面是一个简单的示例代码，演示了如何使用拖放 API 实现项目任务管理应用中的拖放功能： <div class="task" draggable="true...总结本文主要介绍了 Drag and Drop API，我们了解了这个 API 的作用和如何使用，在文章中还通过一些常见使用示例和大家展示代码如何实现，最后还给出一些使用建议和注意，希望大家能够更好的了解

2252 0

【Flutter 专题】97 仿网易新闻标签选择器

单个拖拽标签标签需要拖拽，和尚将 DragTarget 作为 Draggable 的子 Widget 嵌套应用；主要实现三个回调，分别为是否接收 Draggable 状态的 onWillAccept...回调，接收 Draggable 的 onAccept 回调和取消接收状态的 onLeave 回调； _itemDragableWid(list, index) { return Draggable...；和尚在测试过程中拖动时文字会变大且有下划线，主要是主题设置问题，和尚在外层嵌套一个 Material Widget 来避免文字样式变化；但与此同时会带来新的问题，和尚设置的圆角...Container 的四个角在拖动过程中有白色背景，其原因是设置 Material 嵌套后，默认背景色为白色，于是和尚设置 Material 背景色为透明，设置 Container BoxDecoration...因为和尚是采用 Draggable + DragTarget 嵌套，所以在拖拽过程中会执行两次 onWillAccept 判断，此时不能确定是由哪个标签 item 起始的，导致列表刷新异常；于是和尚设置了一个临时数组

8583 1

拖拽牛逼，轻松实现一个自由拖拽的组件

如何使元素支持拖动实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。...属性值如下所示： true：规定元素的可拖动的 false：规定元素不可拖动 auto：使用浏览器的默认行为当我们在元素元素标签中添加 draggable 属性时，该元素就可以进行拖动操作了。... 可拖动的元素复制代码拖动事件事件分类元素可以进行拖动了，我们就可以通过元素的拖动事件进行拖动开始-结束的一些逻辑控制了，拖动事件主要分为两个类别...，一类是拖动元素可以触发的： dragstart：鼠标点中元素并且开始移动时触发 drag：拖拽过程中持续触发 dragend：拖拽结束松开鼠标时触发另一类是，是当拖拽元素到某个目标元素时，目标元素会触发的...那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？

1.8K3 0

HMTL5新增Api

与全屏一样需要添加浏览器前缀 //CancelFullScreen() //document.CancelFullScreen() //伪类选择器.../** * 是否全屏 * document.IsfullScreen //true/false * 全屏伪类选择器浏览器前缀...ondragstart:源对象开始被拖动 ondrag:源对象在拖动过程中 ondragend:源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件 ondragenter:目标对象被源对象拖动着进入...one"> one two...three four </div

4631 0

vue 中基于html5 drag drap的拖放

事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。案例一：开始的我，so easy！...此时的我，崩溃…… 终于，也不知道哪来的灵感，这个困扰我两秒的难题突然就被我成功攻克了。好了，我要开始吹牛了…… 案例三：我的思路是这样的（不想看？...直接看代码好了，反正是给我自己看的）：左边列表元素可拖动（draggable=’true’）,绑定dragstart(开始事件)，不要给它绑定draging(拖动事件)，这样左边列表元素有拖动属性，但是位置不会改变...当右侧拖动区域第一次触发了drop 操作后，新生成一个对象，这个对象既有拖动（draggable=’true’）属性,也绑定dragstart(开始事件)，拖动事件（drag）,这样新元素会在右侧随意拖动...每次拖动元素都会触发drop 事件，并不是每次都要生成一个新元素，要知道是从左边列表拖到右侧第一次drop 的时候生成新元素。怎么知道呢？

1.4K0 0

ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局

改变后的布局 ? 本节知识点： easyui draggable 与 resizable 的结合使用（拖动与设置大小）在Form添加Action Action提取来自48节的Create代码。...').draggable({ edge: 5 }).resizable(); 代码解析： onDrag e 在拖动过程中触发，当不能再拖动时返回false。...$('.easyui-draggable').draggable({ edge: 5 }).resizable(); 边框位置5px内都可以做为设置大小的边界运行结果：任意拖动位置 ?...填充表单：如何填充表单。我们需要提取“表单申请”的代码。...如何保存？我们要保存到Flow_Form表中的Html字段中去。

8719 0

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

现在我们知道了如何获取元素的宽度，当我们缩放视图窗口时，需要判断目前视图窗口的宽度处于哪个断点范围内，这时候我们用到的方法是 onWidthChange，该方法会监听每一次宽度变化，根据新的窗口宽度和断点信息...clsx 是一个用于动态生成 CSS 类名的工具，使得合并和处理类名变得更加简单和灵活。...下面具体讲讲如何实现 3.3 拖拽功能实现拖拽功能函数 mixinDraggable，核心用到了 react-draggable 拖拽组件。...在实际使用拖拽功能时，会有当前拖动元素的阴影站位，如下图11号元素：如何实现拖拽过程中的阴影？...在我们使用 GRL 渲染子元素时可以添加拖动时的类名例如.droppable-element，并给类目设置样式 .droppable-element { ...

1.1K2 0

HTML5 - 拖放

放置元素-事件：事件描述 ondragenter 当拖动中鼠标第一次进入一个元素时触发 ondragover 当拖动中的鼠标移动经过一个元素时触发 ondragleave 当拖动中的鼠标离开元素时触发...dropEffect 拖放的操作类型，决定了浏览器如何显示鼠标形状 items 属性返回所有项与相关格式的所有文件 setData(format,data) 在dragstart事件调用此函数在dataTransfer.../zh-CN/docs/Web/API/DataTransfer 先来看个小例子需要注意的是，想要让元素可拖动，必须把该元素的 draggable 属性设为 “true” 才允许拖动。...开始拖动——正在拖动——放下此时，控制台打印结果如下： demo 在进行拖放操作的时候，dataTransfer对象可以用来保存被拖动的数据。...通俗一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。 <!

1.5K1 0

HTML5 进阶系列：拖放 API 实现拖放排序

想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。...而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。拖放事件拖放事件由不同的元素产生。...接下来认识一下这个对象的方法和属性，来了解它是如何传递数据的。 setData() 该方法向 dataTransfer 对象中存入数据。...值得注意的是：IE 不支持 dataTransfer 对象。对，不管哪个 IE 版本都不支持。实现拖放排序上面已经熟悉了拖放 API 的使用，我们来实现个简单的拖放排序，这也是在项目中比较常见的。...：drag-demo 兼容主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。

1.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭