开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery 鼠标拖拽事件

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标拖拽事件是指用户通过鼠标拖动元素时触发的事件，常用于实现拖放功能。

相关优势

简化代码：jQuery 提供了简洁的 API，使得处理鼠标拖拽事件变得更加容易。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，确保拖拽功能在各种浏览器中都能正常工作。
丰富的插件支持：有许多现成的 jQuery 插件可以用于实现拖拽功能，如 jQuery UI 的 Draggable 组件。

类型

mousedown：当鼠标按钮按下时触发。
mousemove：当鼠标在元素上移动时触发。
mouseup：当鼠标按钮释放时触发。

应用场景

拖放排序：在列表或网格中拖动元素进行排序。
拖动调整大小：拖动元素的边框来调整其大小。
拖动移动元素：将元素从一个位置拖动到另一个位置。

示例代码

以下是一个简单的 jQuery 鼠标拖拽示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Drag Example</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: move;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="draggable"></div>

    <script>
        $(document).ready(function() {
            var isDragging = false;
            var offset = { x: 0, y: 0 };

            $('#draggable').mousedown(function(event) {
                isDragging = true;
                offset.x = event.pageX - $(this).offset().left;
                offset.y = event.pageY - $(this).offset().top;
            });

            $(document).mousemove(function(event) {
                if (isDragging) {
                    $('#draggable').css({
                        left: event.pageX - offset.x,
                        top: event.pageY - offset.y
                    });
                }
            });

            $(document).mouseup(function() {
                isDragging = false;
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

拖拽元素闪烁或跳动：
- 原因：可能是由于 mousemove 事件触发过于频繁，导致元素位置更新过快。
- 解决方法：使用 setTimeout 或 requestAnimationFrame 来限制位置更新的频率。

拖拽超出边界：
- 原因：元素被拖动到视口之外，导致不可见或位置不正确。
- 解决方法：在 mousemove 事件中添加边界检查逻辑，确保元素不会超出视口范围。
拖拽时选中文本：
- 原因：拖拽操作可能会触发浏览器的文本选择功能。
- 解决方法：在拖拽开始时禁用文本选择，拖拽结束后恢复。

$('#draggable').mousedown(function() {
    document.body.style.userSelect = 'none';
});

$(document).mouseup(function() {
    document.body.style.userSelect = '';
});

通过以上方法，可以有效地解决 jQuery 鼠标拖拽事件中常见的问题。

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

有帮助

没帮助

相关·内容

jquery鼠标事件

.hover(handlerIn(eventObject),handlerOut(eventObject)) 　　　　handlerIn(eventObject) 　　　　　　当鼠标指针进入元素时触发执行的事件函数...handlerOut 　　　　　　当鼠标指针离开元素时候触发执行的事件函数。　　...，　　　　解除绑定上面的例子中使用: 　　　　$("td").unbind('mouseenter mouseleave'); .mousedown() 　　当鼠标按下的时候绑定的事件处理函数....'); 　　}); .mouseenter() 　　当鼠标指针进入穿过元素时候触发的事件。　　...").mouseout(function(){ 　　　　("p").css("background-color","#E9E9E4"); 　　}); .mouseover() 　　当鼠标指针位于元素上方时触发的事件

4.5K7 0

【云端架构】前端jQuery鼠标事件精选

鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的...3、mousedown事件：按下鼠标时触发 $('p').mousedown(function()); 4、mouseup事件：松开鼠标时触发 $('p').mouseup(function());...5、mouseover事件：鼠标从一个元素移入另一个元素时触发 mouseout事件：鼠标移出元素时触发 $('p').mouseover(function()); $('p').mouseout...(function()); 6、mouseenter事件：鼠标移入元素时触发 mouseleave事件：鼠标移出元素时触发 $('p').mouseenter(function()); $('p')....mouseleave(function()); 7、hover事件 $('p').hover( function(), function() ); 8、toggle事件：鼠标点击切换事件 $('p').

1.8K6 0

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

一、基于鼠标事件的拖拽原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签： , 事件，因为鼠标移动非常频繁 onmouseup 该事件会在鼠标按键被松开时触发支持该事件的HTML标签：鼠标事件的拖拽大功告成！...---- 二、基于HTML5拖拽API的拖拽前序知识介绍一个典型的拖拽操作是这样的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标...Event On Event Handler Description drag ondrag 当拖动元素或选中的文本时触发 dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲

3.4K3 0

Js拖拽事件

oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; } 知识点：用class获取元素封装; 学习mouseover事件...; 常见拖拽bug造成原因,鼠标当前位置-元素距离浏览器的位置；超过容器大小判断；

14.1K2 0

JS示例37-鼠标拖拽

var disX = 0; var disY = 0; oDiv.onmousedown = function (ev) { // 鼠标按下...var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; // 横向距离 = 鼠标位置...oEvent.clientY - disY + 'px'; }; document.onmouseup = function () { // 鼠标抬起...(事件加到document) document.onmousemove = null; // 关闭移动事件 document.onmouseup...= null; // 关闭抬起事件 }; }; }; <div

9.2K1 0

【javaScript案例】之鼠标拖拽效果

这次的效果图如下：拖拽.gif 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果如何实现拖拽的效果呢？...我们需要用到三个函数：onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置...，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值；在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置，然后改变其...在鼠标抬起的回调函数中，我们需要清除鼠标移动和鼠标抬起，通过将onmousemove和onmouseup值设置为null即可注意！！！...鼠标移动函数和抬起函数均要写在鼠标按下函数中，因为我们是要在鼠标按下这个动作之后来设计之后的行为，而且很重要的一点是：鼠标按下函数是div的，鼠标移动和鼠标抬起是document的因为我们的意思并不是鼠标在

1.4K3 0

js鼠标事件

页面加载事件（onload），鼠标双击事件（ondbclick） window.onload=function(){ //绑定元素,执行对应事件鼠标双击(ondblclick...(){ alert('我是双击显示的'); } } 鼠标摁下（onmousedown）事件（摁下就执行，鼠标无需抬起...} } 鼠标抬起（onmouseup）事件（摁下后，鼠标回弹才执行） window.onload=function(){ ...鼠标移入（onmouseover）事件 window.onload=function(){ //绑定元素,执行鼠标移入事件鼠标移入(onmousemove...）区别：移动事件指鼠标只要移动就产生事件，移入事件需要移入到指定的对象内才执行事件

18.3K4 0

GUI（鼠标事件）

action事件先执行，但是action事件除了鼠标还可以用键盘执行，因此推荐使用action事件 //action事件 button.addActionListener...Override public void actionPerformed(ActionEvent e) { System.out.println("鼠标点击...action事件"); } }); //鼠标点击 button.addMouseListener(new MouseAdapter...@Override public void mouseClicked(MouseEvent e) { System.out.println("鼠标单击..."); if(e.getClickCount()==2){ System.out.println("鼠标双击");

2.9K2 0

js事件高级：拖拽

什么是拖拽拖拽就是在某一个对象上，当鼠标按下去之后，拖着对象走，松开鼠标时，对象位置变成拖拽的位置简单拖拽 1.实现简单的拖拽功能 2.当拖拽对象到网页边缘时，会停留在边缘实现代码 <!...oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; //将鼠标移动事件都加在...return false; //足以解决chorm ff IE9的问题 } else { //将鼠标移动事件都加在document...= mouseUp; //iE8一下对拖拽会有不兼容,所以要用到捕获 //设定一个捕获:将所有的事件全部放在oDiv上...div中距离div左端和顶端的距离 disX = oEvent.clientX - oDiv1.offsetLeft; //将鼠标移动事件都加在

9.4K2 0

常用鼠标事件

1.常用鼠标事件 1.1 案例：禁止选中文字和禁止右键菜单 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单 document.addEventListener...现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。...1.3 获取鼠标在页面的坐标 // 鼠标事件对象 MouseEvent document.addEventListener('click', function...这个天使图片一直跟随鼠标移动案例分析 ① 鼠标不断的移动，使用鼠标移动事件： mousemove ② 在页面中移动，给document注册事件 ③ 图片要移动距离，而且不占位置，我们使用绝对定位即可...1px 就会触发这个事件 // 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标， // 把这个x和y坐标做为图片的top和left 值就可以移动图片

3.2K1 0

事件类型之鼠标事件

事件类型之鼠标事件常见事件类型事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。...DOM 支持大量的事件鼠标事件键盘事件表单事件窗口事件焦点/剪贴板事件网页状态事件 Touch事件鼠标事件鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些。...mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。...mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件 mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件 mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件...mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件 wheel：滚动鼠标的滚轮时触发事件注意事项 click事件指的是，用户在同一个位置先完成mousedown动作，再完成

2.5K3 0

js鼠标事件

今天遇到一个非常奇怪而又搞笑的事情：给一个a标签添加一个鼠标移动上时给一个事件，我给其添加的是一个onMouseMove事件，结果在IE6 7 8 9和GOOLE中都很正常，结果在Firox中出现问题了...这是我遇到的第一个在firox中的兼容性问题，开始让我很苦恼，不知道什么原因，结果仔细查找，就是onMouseMove事件在日怪。当我给提添加onMouseOver事件时就对了。...鼠标的一些事件如下所示： onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4...|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件....[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件

13.7K3 0

常用鼠标事件

常用鼠标事件 1 、案例：禁止选中文字和禁止右键菜单我是一段不愿意分享的文字 // 1. contextmenu 我们可以禁用右键菜单...document.addEventListener('selectstart', function(e) { e.preventDefault(); }) 2、鼠标事件对象...3、获取鼠标在页面的坐标 // 鼠标事件对象 MouseEvent document.addEventListener('click', function...(e.clientY); console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标...1px 就会触发这个事件 // 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标， // 把这个x和y坐标做为图片的top和left 值就可以移动图片

1.9K2 0

鼠标滚轮事件

ev.preventDefault(); } return false; //阻止的是obj.on事件名称所触发的默认行为

3.9K1 0

JQuery事件

1 鼠标事件 click() ------- 鼠标单击事件 dbclick() -------鼠标双击事件 mouseenter() ...-------鼠标移入事件 mouselever() ------鼠标移出事件 hover() ------光标悬停事件 2 键盘事件 keydown(...如果是keypress事件中,则拿到ASCII码. } ); 案例2:传递数据给事件处理函数语法: jQueryObject.keydown( [[ data ,] handler ] ); data...return event.which >= keys.start && event.which <= keys.end; } ); 3 表单事件 submit -----提交事件 ...focus() ------获得焦点事件 blur( ) ------失去焦点事件

2.1K4 0

JavaScript 鼠标拖拽div 改变其大小

）的看街景时地图可以拖拽等功能 ?...分析一下，实现这个功能需要：鼠标按下，鼠标移动和鼠标抬起几个功能方能实现，那么找到相应的js事件：mousedown、mousemove、mouseup 找到这几个事件，基本上我们的功能可以说完成了一半了...，只需要在里面做相应事件处理就能搞定了，具体看下代码，很简单的操作：拖拽div jquery.js...e) e = window.event; //ie事件模型 //注销捕获事件处理程序 if (document.removeEventListener)

1.7K3 0

jQuery事件

常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready...// this.style.background = 'red'; // $(this) 指的是当前发生事件的jquery对象 $(this).css(...{'background':'gold'}); // 获取jquery对象的索引值,通过index() 方法 alert($(this).index())...，但是它是一个原生js对象 $(this) 指的是当前发生事件的jquery对象 2....小结 jQuery常用事件: click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发

31.8K8 5

jquery事件

label>Newsletter: jQuery...Hello AgainAnd Again $("div").siblings() 结果：[ Hello, And Again ] 添加点击事件

1.9K7 0

jQuery 事件

常见 DOM 事件：鼠标事件键盘事件表单事件文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter...该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。提示：如需移除事件处理程序，请使用Off()方法。...event.pageX 返回相对于文档左边缘的鼠标位置 event.pageY 返回相对于文档上边缘的鼠标位置 event.preventDefault() 阻止事件的默认行为 event.relatedTarget...返回当鼠标移动时哪个元素进入或退出 event.result 包含由被指定事件触发的事件处理程序返回的最后一个值 event.stopImmediatePropagation() 阻止其他事件处理程序被调用...返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 event.type 返回哪种事件类型被触发 event.which 返回指定事件上哪个键盘键或鼠标按钮被按下常用jQuery事件的范例代码

2.9K7 0

原生JS实现拖拽鼠标绘画

分享一个用原生JS实现的拖拽鼠标绘画的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴。原生JS实现拖拽鼠标绘画...document.onmousemove = function (ev) { var oEvent = ev || event; // 让DIV跟着鼠标轨迹运动

3.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭