jquery 禁止鼠标拖动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，可以通过事件绑定来禁止鼠标拖动。

类型

在 jQuery 中，可以通过以下几种方式来禁止鼠标拖动：

使用 CSS：通过设置 cursor 属性为 default 或 not-allowed，可以改变鼠标指针的样式，从而提示用户该元素不可拖动。
使用事件绑定：通过绑定 mousedown 和 mousemove 事件，可以阻止默认的拖动行为。

应用场景

禁用特定元素的拖动：例如，在表单中禁用某些输入框的拖动。
保护敏感区域：例如，在地图应用中禁用某些区域的拖动。

示例代码

以下是一个使用 jQuery 禁止鼠标拖动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>禁止鼠标拖动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .no-drag {
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div id="draggable" class="no-drag">
        这个区域不可拖动
    </div>

    <script>
        $(document).ready(function() {
            $('#draggable').on('mousedown', function(event) {
                event.preventDefault();
            });

            $('#draggable').on('mousemove', function(event) {
                event.preventDefault();
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么设置了 cursor: not-allowed 之后，用户仍然可以拖动元素？

原因：仅仅设置 CSS 样式并不能阻止元素的拖动行为，需要通过 JavaScript 来阻止默认事件。

解决方法：使用 jQuery 绑定 mousedown 和 mousemove 事件，并在事件处理函数中调用 event.preventDefault() 方法来阻止默认行为。

$('#draggable').on('mousedown', function(event) {
    event.preventDefault();
});

$('#draggable').on('mousemove', function(event) {
    event.preventDefault();
});

通过上述方法，可以有效地禁止鼠标拖动元素。

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

有帮助

没帮助

如何在CEF (Chromium Embedded Framework)中拖动图标时在鼠标光标上添加禁止符号？

当我在浏览器上拖动一个项目时，如果它被拖动到另一个窗口，我希望鼠标光标显示禁止符号，如下所示：

浏览 13提问于2015-04-16得票数 0

1回答

如何在jquery中禁用选择文本

、、

我读了一些文章，尝试使用一些代码来禁用网站中的选择文本，这些代码与Jquery-UI脚本一起运行但是它将禁止点击Selectbox，textbox和其他字段，用户不能做任何事情，它看起来像只读属性如何在鼠标按下并进行拖动时禁用选中文本，而不禁用其他任何内容。

浏览 4提问于2015-09-16得票数 1

1回答

我在触摸设备上拖动传单对话框时遇到问题。我使用Leaflet 1.0.3 ()和Leaflet.Dialog插件()在地图顶部显示一些信息。它可以很好地处理鼠标事件。然而，它在触摸屏上完全失败了。我怀疑Leaflet在触摸设备上的地图事件监听器禁止覆盖元素上的触摸事件，所以我尝试在地图选项中将拖动和点击设置为false，但都不起作用。我还在对话框中添加了jquery-ui可拖动功能，这使得整个对话框可以在非触摸屏设备上拖动；但仍然无法处理触摸事件。有没有关于如何让它工

浏览 37提问于2017-07-01得票数 0

4回答

如何在mousedown元素之外捕获mouseup事件？(即为了适当的拖放？)

、、、

如果在触发鼠标按钮的元素之外释放鼠标按钮，则不会触发。可拖的还在被拖着。我希望当我释放鼠标按钮时，拖拽就会

浏览 5提问于2014-01-12得票数 8

回答已采纳

2回答

通过拖动鼠标创建可拖动对象

、、

我是JQuery库的新手。我目前正在尝试创建一个可拖动的鼠标。比方说，当我按下鼠标，它开始绘图，然后我拖动鼠标改变大小，然后我释放鼠标完成绘图。使用JQuery可以做到这一点吗？

浏览 0提问于2010-05-28得票数 0

回答已采纳

5回答

jquery禁用在<object>上单击

、

我们可以禁止点击<object>标签吗？我正在使用嵌入代码将一个播放器附加到body。当播放器被点击时，它会把用户带到播放器页面，比如youtube。这干扰了我在播放器上的可拖动功能。只要拖动播放器并松开鼠标，链接就会执行。 <object><param></object>

浏览 2提问于2011-02-11得票数 2

回答已采纳

1回答

如何持续引发拖动事件，直到鼠标弹出？

、、、

以下代码片段仅在我的鼠标拖动/移动时才有效。我想继续引发拖动事件，直到我鼠标向上。scaleLeft.className = "scaleLeft"; <em

浏览 2提问于2015-05-13得票数 0

1回答

Google，通过鼠标禁用拖动/平移

、、、、

我知道在Java googleMap.draggable = false;中的"google.maps.MapOptions对象规范“禁止拖动，但是它是如何为ActionScript3.0工作的？我想通过鼠标禁用拖拽/摇摄。我用过googleMap.disableDragging();，但它不起作用。

浏览 0提问于2011-11-26得票数 1

回答已采纳

1回答

使用jQuery UI问题在iFrame中拖放

、、、、

我使用的是jQuery UI。当我在iframe中拖动元素并将鼠标移出iframe时，该元素仍处于可拖动状态。因此，当我将鼠标移回iframe时，我仍然可以拖动它，就像我按下鼠标左键一样。所以，如果我开始拖动元素，当我在最后一个可拖动的位置离开iframe时，它会停止吗？

浏览 8提问于2013-02-25得票数 0

1回答

jquery:按下鼠标立即拖动

、、

使用jQuery，可以通过在mousedown事件上应用.draggable()方法使元素可拖动。然后将其拖动到另一个鼠标按下(并拖动)。是否可以通过单鼠标按下(鼠标向下事件)使元素可拖动并立即开始拖动。( 1)按蓝色直角，尝试拖动(元件不可移动)；1)按蓝色直角并拖动->元件是可移动的。 <

浏览 2提问于2016-11-07得票数 1

回答已采纳

1回答

两个jquery插件(dragscrollable和scrollto)之间的冲突

、

我正在尝试实现类似于的东西，在其中我可以拖动div的内容，也可以单击并滚动到元素。我设法找到了这两个插件，和，每个插件都在我的div上完美地独立工作，但当我将这两个插件添加在一起时，mousedown和click事件之间似乎存在冲突，我的意思是，当我按住鼠标拖动时，当我松开鼠标时，拖动成功，但随后我滚动回到我按住鼠标开始拖动的元素，就像我点击了该元素一样。我知道单击是鼠标按下和鼠标释放的序列，但有什么方法可以区分按住鼠标</e

浏览 0提问于2011-04-11得票数 0

1回答

禁用WebView中的拖动

、、、、

我正在构建一个可可应用程序，我需要禁止用户拖动图像，例如。在Google.com上，您可以将鼠标按在谷歌徽标上，并将其拖放到桌面上。有什么办法可以消除这种行为吗？

浏览 3提问于2015-10-14得票数 0

1回答

在Jquery中拖放和还原

、、

我试图通过将元素的副本保留在其原始位置来将元素拖放到容器中。 <script type="text/javascript"> // sets the draggable cursor: 'move', // sets the cursor apperance revert: 'valid

浏览 2提问于2014-01-19得票数 1

1回答

如何使用Jquery的pageX和PageY拖拽图片？

、

大家好，我是Javascript和Jquery的新手。我得到了pagex和pagey的值，但图像不会随着鼠标的移动而移动……下面是代码 var imageDragged = null; console.log(imageDragged); }} 我知道我们有Jquery

浏览 1提问于2013-05-25得票数 0

2回答

在Jquery中单击function equlviant进行拖动

、

我通过使用jQuery UI设置了我的拖动。我的问题是，当用户开始拖动div时，如何向该div添加CSS类，并在用户拖动完div后将其删除。类似于链接的点击功能事件。

浏览 1提问于2012-08-25得票数 1

回答已采纳

1回答

jQuery可拖动图像，当鼠标超出边界时停止拖动(Div)

、、、

我有一个在div中运行的可拖动的图像。然而，我想这样做，如果当用户按下鼠标并拖动元素/ div时，当鼠标按下或其边界离开div时，它将不再可拖动。当按下控件上的按钮时，将启用拖动，该按钮将正常工作。我只是希望能够在鼠标超出特定div /元素的边界时停止拖动。 if

浏览 6提问于2012-03-21得票数 3

回答已采纳

1回答

在视频拖动栏上禁用jQuery* ui拖动*

、、

我正在使用jQuery UI来使div可拖动。在一个div中有一个视频流播放器。用我的找个小提琴。

浏览 4提问于2014-05-30得票数 2

1回答

jQuery UI可拖动的div棒到鼠标

、、

我使用div作为弹出窗口，可按如下方式拖动问题是，如果我们在此div上单击鼠标，然后离开单击，那么在某些IE版本中，div会粘附在鼠标上，特别是在Windowsdiv会随着鼠标移动，即使不是单击和拖动操作(这只是鼠标悬停操作)。请让我知道这是jQuery的错误或一些操作系统/浏览器的错误和适当的解决方案？我正在使用jquery-ui-1.8.6 js和jquery

浏览 2提问于2012-07-16得票数 0

回答已采纳

4回答

在发生默认事件后，我如何执行自己的代码？

、

例如，我想要在默认鼠标滚轮发生后获取scrollTop值。jquery或javascript能帮我做到这一点吗？

浏览 2提问于2012-08-04得票数 0

19回答

如何区分鼠标的“单击”和“拖动”

、

我使用jQuery.click来处理拉斐尔图形上的鼠标点击事件，同时，我需要处理鼠标的drag事件，鼠标拖动由拉斐尔中的mousedown、mouseup和mousemove组成。很难区分click和drag，因为click也包含mousedown和mouseup，我如何在Javascript中区分鼠标“点击”和鼠标“拖动”呢？

浏览 6提问于2011-05-18得票数 189

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

jquery 禁止鼠标拖动

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐