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

Jquery多个div相同的类,只拖动"this“div

JQuery是一个流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画效果等操作。在处理多个相同类的div元素时,可以使用JQuery的选择器和事件处理方法来实现只拖动当前点击的div。

首先,给所有需要拖动的div元素添加相同的类名,例如"drag"。然后,使用JQuery的事件处理方法来监听鼠标按下、移动和释放的事件。

以下是一个示例代码:

HTML代码:

代码语言:html
复制
<div class="drag">Div 1</div>
<div class="drag">Div 2</div>
<div class="drag">Div 3</div>

JavaScript代码:

代码语言:javascript
复制
$(document).ready(function() {
  var dragging = false;
  var dragElement;

  $(".drag").mousedown(function(e) {
    dragging = true;
    dragElement = $(this);
    var position = dragElement.position();
    var offsetX = e.pageX - position.left;
    var offsetY = e.pageY - position.top;
    dragElement.css("position", "absolute");
    dragElement.css("left", position.left + "px");
    dragElement.css("top", position.top + "px");
    dragElement.css("margin", "0");
    dragElement.css("z-index", "9999");
    dragElement.css("opacity", "0.8");
    dragElement.css("cursor", "move");
    dragElement.css("pointer-events", "none");
    dragElement.css("user-select", "none");

    $(document).mousemove(function(e) {
      if (dragging) {
        dragElement.css("left", (e.pageX - offsetX) + "px");
        dragElement.css("top", (e.pageY - offsetY) + "px");
      }
    });

    $(document).mouseup(function() {
      if (dragging) {
        dragging = false;
        dragElement.css("opacity", "1");
        dragElement.css("cursor", "auto");
        dragElement.css("pointer-events", "auto");
        dragElement.css("user-select", "auto");
      }
    });
  });
});

上述代码中,首先使用$(document).ready()函数来确保页面加载完成后再执行代码。然后,使用$(".drag")选择器选中所有具有"drag"类的div元素,并使用.mousedown()方法来监听鼠标按下事件。

在鼠标按下事件处理函数中,将dragging变量设置为true,表示正在拖动。同时,将当前点击的div元素赋值给dragElement变量,并获取其初始位置和鼠标点击位置的偏移量。

接下来,通过修改div元素的CSS样式,将其设置为绝对定位,并根据初始位置和偏移量设置其left和top属性。还可以设置其他样式,如z-index、opacity等,以提高拖动效果。

在鼠标移动事件处理函数中,判断是否正在拖动,如果是,则根据鼠标移动的位置更新div元素的位置。

最后,在鼠标释放事件处理函数中,将dragging变量设置为false,表示拖动结束,恢复div元素的样式。

这样,就实现了只拖动当前点击的div元素。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

解决Kotlin 在实现多个接口,覆写多个接口中相同方法冲突问题

/ interface B{ fun x(): Int = 1 } interface C{ fun x(): Int = 0 } /**一个实现了两个接口,两个接口中方法相同,这个在覆写时候就会出现冲突.../** * @author:wangdong * @description:继承,实现接口方法冲突问题 * 接口方法可以有默认实现 * 签名一致且返回值相同冲突 * 子类(实现...,两个接口中方法相同,这个在覆写时候就会出现冲突*/ /**采用分支模式解决冲突问题*/ class D(var y: Int = 0):A() ,B,C{ //返回值一定要一样啊,例如:一定要是...我们都知道 Java 当年高调调戏 C++ 时候,除了最爱说内存自动回收之外,还有一个著名单继承,任何 Java 都是 Object 子类,任何 Java 有且只有一个父,不过,它们可以有多个接口...以上这篇解决Kotlin 在实现多个接口,覆写多个接口中相同方法冲突问题就是小编分享给大家全部内容了,希望能给大家一个参考。

2.2K10

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

“拖拽”实现 关键词就是“拖拽”,其实“拖拽”交互方式早在 Jquery 时代就有,关于拖拽在前端实现主要分为 2 种 是以 jquery-ui 为代表 draggable 和 Droppable...,用于约束“拖”和“放”组件关系,如果字符串不一致就无法回调事件,主要是为了避免页面中多个拖放实例 item 就是拖动时候传递数据 end 是拖放结束后回调 collect 用于获得拖动状态,...'Release to drop' : 'Drag a box here'} ); }; type 与拖动 type 相同 drop 函数返回放置节点数据,返回数据给 drag...如果看左侧组件区和中间设计区是否跟 react-dnd 官方 demo 很相似呢?...定义 JSON 接下来我们要: 定义可拖动组件类型 每个组件类型对应渲染组件 每个组件属性设置 先来定义几个可拖动字段吧,比如最基本数据类型,div、h1、 p 标签都是一个组件,那就我先定义出以下字段类型

5.7K20

前端之JQuery

JQuery版本 1.x:兼容IE678,使用最为广泛,官方做BUG维护,功能不再新增。...如果不考虑兼容低版本浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容IE678,支持最新浏览器。需要注意是很多老jQuery插件不支持3.x版。...:has(h1)")// 找到所有后代中有h1标签div标签 $("div:has(.c1)")// 找到所有后代中有c1样式div标签 $("li:not(.c1)")// 找到所有不包含c1样式...包含了许多维持状态小部件(Widget),因此,他与典型JQuery插件使用模式略有不同,所有的JQuery UI小部件(Widget)使用相同模式,所有,只要你学会其中一个,你就知道如何使用其他小部件...名,如果有就移除,如果没有就添加. slider(拖动条) <!

3.4K50

jQuery

’*"’) 匹配所有元素 选择器 $(".class") 获取同一class元素 标签选择器 $(“div”) 获取同一标签所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器...3.切换 $("div").toggleClass("current"); 在原生js中className会覆盖名,在jQuery中指操作指定名,不影响原先名 3.2 jQuery效果...>123 $('div').html('ljc'); //div剩ljc 普通元素文本内容 只会获取文本内容,不会获取标签 表单值 val() console.log...5.1.1 on() 绑定事件 on()绑定事件好处 可以绑定多个事件,多个处理事件函数 $('div').on({ mouseover : function() {}, click...('click','li') 触发一次事件 $('div').one('click',function(){}) 5.1.3 tigger()自动触发事件 // 会触发元素默认行为 $("div"

8.4K10

draggable用法_draggable

大家好,又见面了,我是你们朋友全栈君。 一、概述 通过前面几节学习,大家应该都知道了,一个div对象是可以通过拖拉来改变大小,也可以通过拖动来改变其位置。...//定义一个容器,div就只能在容器范围内活动了 7: cursor: "move", //定义拖动时鼠标指针状态 ,参数类型详见css中cursor...配置 8: cursorAt:{top:10}, //定义拖动时候鼠标指针位置,此位置是相对被拖动对象边框,单位px 9: opacity...: 0.40, //设置对象被拖动透明度 10: handle: "div", //设置拖动控制器,也就是说当鼠标按住控制器时候...', 'select', 'option'],//设置被拖动div碰到那些dom元素时停止 16: start:function(e,ui){}, //开始拖动执行函数

99620
领券