如何使div满足和可拖动
要使一个 div 元素能够被拖动，您需要为其添加一些 JavaScript 代码以及相关的 CSS 样式。在这里，我为您提供一个示例，展示如何创建一个可拖动的 div 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<style>
.draggable {
cursor: move;
background-color: lightblue;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="draggable">
This div can be dragged around.
</div>
<script>
// JavaScript
document.addEventListener('DOMContentLoaded', function () {
const draggableDiv = document.querySelector('.draggable');
draggableDiv.addEventListener('mousedown', function (event) {
event.preventDefault();
const mouseX = event.clientX;
const mouseY = event.clientY;
draggableDiv.style.position = 'absolute';
draggableDiv.style.zIndex = 1;
draggableDiv.addEventListener('mousemove', function (event) {
const dx = event.clientX - mouseX;
const dy = event.clientY - mouseY;
if (dx !== 0 || dy !== 0) {
draggableDiv.style.left = (mouseX + dx) + 'px';
draggableDiv.style.top = (mouseY + dy) + 'px';
}
});
});
});
</script>
</body>
</html>在这个示例中，我们创建了一个可拖动的 div 元素，当用户鼠标点击该元素时，它会在鼠标指针下方保持固定位置。当用户移动鼠标时，该元素会跟随鼠标移动。
请注意，此示例仅适用于 Chrome 浏览器。这是因为 Chrome 浏览器为 div 元素提供了原生的拖动功能。在其他浏览器中，您可能需要手动添加一些 JavaScript 代码来实现拖动功能。
相关·内容
1回答
jQuery droppables -在drop上更改元素
jquery、draggable、droppable
在删除(li)之后，我尝试将一个元素(li)更改为另一个元素(div)。hoverClass: "dropElhover", // change the li element to divhere});drop: function(ev, ui) {
$(ui.draggable).replaceWith("<div>Some conten
浏览 0提问于2008-11-14得票数 4
1回答
在jQueryUI滑翔机仍被拖动时停止它
javascript、jquery、jquery-ui、jquery-events、jquery-ui-slider
，这是我的问题：，这是我的情况：
我有一个可拖动的图像(称为“可拖动图像”)，位于父div (称为“父div")中，它控制”可拖图像“的边界。”可拖动图像“的大小由滑块控制。问题是，当我使“可拖的图像”变小，并将其放置在“父div”的边缘，如果我滑动它使</e
浏览 1提问于2012-03-22得票数 1
回答已采纳
4回答
带有文本区的可拖动的Div。拖曳问题
jquery、textarea、draggable
我有一个带有文本区域的div。主div是可拖动的，并且工作正常，但我无法在拖动div的同时单击其中的文本区域。有没有一种方法可以拖动div，即使我从div内的文本区域拖动它？下面是如何使我的div可拖拽{
containment: $('#d
浏览 2提问于2011-09-26得票数 2
2回答
图像的可拖动和可调整大小在JqueryUI中不起作用？
jquery-ui、jquery-ui-draggable、jquery-ui-resizable
我使用了下面的代码来拖动和调整图像大小， <p>Drag me around</p><div id="
浏览 3提问于2012-05-22得票数 5
2回答
jQuery可拖动元素
jquery、jquery-ui、jquery-ui-draggable
如何保存可拖动元素，以便下次加载它时，不必再次发出draggable()函数。我是否必须再次发出draggable()函数才能使其可拖动。
浏览 2提问于2011-06-24得票数 0
回答已采纳
1回答
在插件中包含jquery ui函数
jquery、jquery-ui、jquery-plugins
我想知道如何在我正在修改的单独插件中包含jquery UI库中的拖动功能。我想让div成为可拖动的，但又不想编写自己的方法。
浏览 1提问于2010-09-29得票数 0
3回答
如何使父div可拖动
javascript、jquery、css
我有一个有三个按钮的div。div需要是可拖动的，这样您就可以将所有三个按钮一起拖动到屏幕上。这很好，但问题是，当我单击单个按钮时，它继承了可拖动的id，并且它本身也是可拖动的。我不希望这种情况发生。因此，我的问题是:我如何使我的按钮拉扯，但使他们始终保持在一起，使他们可点击。我在下面添加了代码，但是下面是一个JSFiddle：
所以要明确一点: div<
浏览 4提问于2015-12-15得票数 0
回答已采纳
1回答
可拖动的Bootstrap Popover
javascript、jquery、jquery-ui、twitter-bootstrap
我想创建一个Bootstrap弹出窗口，它遵循一个可拖动的图像(使用jQuery UI可拖动库)。通过“跟随”，我的意思是，如果图像向右拖动10个像素，弹出窗口也会向右移动10个像素。我遇到的问题是，我不确定如何将Bootstrap弹出窗口链接到图像。popover intializer上的'container‘参数似乎不起作用(理想情况下，我希望将图像和popover放在父div中，并使该div可
浏览 0提问于2013-05-21得票数 2
回答已采纳
1回答
Ng2-Dragula:在运行时启用拖动
angular、dragula、ng2-dragula、angular-dragula
<div dragula="'card-images'" [dragulaModel]="images"></div>
函数cssClass
浏览 2提问于2018-11-29得票数 0
回答已采纳
2回答
拖动到底部附近时，在可添加DIV的内部滚动
javascript、jquery、css、drag-and-drop
我在一个可滚动的div中有多个可拖动的div。当我将它们拖到可放入区(也是一个可滚动的div)中时，可添加的DIV不会向下滚动。只有页面在移动。怎么说，只有可放的div应该在拖动时滚动？下面是我当前的jquery代码，用于使div可拖动
浏览 2提问于2013-03-21得票数 7
1回答
滚动背景- div溢出时带有内容的图像
css、background、overflow
我有一个带有溢出的容器div :scroll；。它包含一个平铺的背景div (宽度:100%；高度: 100%;)，顶部有许多可拖动的div。当可拖动的div使容器div溢出时，如何让平铺背景也覆盖溢出？谢谢!
浏览 0提问于2011-04-27得票数 3
回答已采纳
3回答
如何在div之间创建可拖动的
draggable、jquery-ui-draggable
如何使元素在两个div之间可拖动？这似乎是draggables应该做的事情。但是我还不能使用我现有的代码。在这个jsfiddle中，我有两个带有可拖动元素的div。我想让一个元素从第一个div转到第二个div。该功能必须存在于许多网站上。
我以前问过，并认为有人会知道如何拥有该功能。如果我的代码不是正确的方式，我如何定义一个元素和</e
浏览 0提问于2011-10-20得票数 1
回答已采纳
2回答
旋转中断，可调整大小和可移动的div
javascript、css、geometry、rotation、svelte
我的工作是可移动的，可拖动的和可调整大小的div，可以旋转。问题是:如何使旋转的div适当地调整大小？它工作良好的底部和右边调整大小点，但顶部和左边使div移动，同时调整大小(当旋转).不知道怎么解决这个问题..。我的问题找不到合适的答案.
如果有人知道如何解决这个问题，请分享你的想法！
浏览 3提问于2022-09-01得票数 1
5回答
具有角的可拖动和可调整大小的div
angular、angular-material、resizable
我正在尝试创建可调整大小的div容器，而且它们也是可拖的。以下是的解决方案
我怎样才能一蹴而就呢？
浏览 7提问于2020-01-31得票数 2
回答已采纳
1回答
单击内部div时jQueryUI可拖动的外部div
jquery-ui-draggable
我已经创建了一个可拖动的div，它工作得很好，如下所示： <div id="titlediv">Some Text</div> <div id="r
浏览 2提问于2012-11-25得票数 1
回答已采纳
1回答
如何使拖动的div在其被拖到的位置上进行，以及如何在html拖放中删除拖放上的“全局”-img。
javascript、html、reactjs、drag-and-drop
你会在左上角看到一个可拖动的div。但是当你拖动这个div时，它：我如何：
使div采取被拖到的位置？在拖动过程中显示光标抓取类型？。
浏览 6提问于2022-11-13得票数 0
9回答
jQuery UI -可删除只接受一个可拖动的
jquery、jquery-ui
我正在制作一个应用程序，即使用一个可下垂的div和几个可拖动的div。我如何使这个可下垂的div不能接受多个可拖div？我在谷歌上搜索过，但没有找到任何解决办法。
我想到了一个解决办法。如何检查这个可下垂的div中是否有丢弃元素？如果它很忙，那么恢复这个可拖的，它试图被删除
浏览 8提问于2010-10-16得票数 11
4回答
如何在jQuery中使元素可拖动？
jquery、jquery-ui、draggable
如何使用jQuery使一个元素(如div )可拖动？
浏览 0提问于2010-03-11得票数 31
回答已采纳
1回答
如何使用dojo/dnd/Moveable以编程方式开始拖动项？
javascript、dojo
我使用是为了使一个项目可拖放。目前使用以下脚本：
我试过使用 /dnd/start，但没有成功。
浏览 18提问于2015-05-06得票数 0
2回答
jquery可丢弃的->避免同一对象的多次丢弃
jquery、jquery-ui、drag-and-drop、draggable、droppable
我有一个具有不同可拖动-elements的容器，并且有一些“目标”div的列表，用户可以在其中放置可拖动元素。顺便说一下，每个tag-Div都有一个唯一的id (<div id="e34a568b2">)$('#taglist').find('div').draggable({helper: &quo
浏览 1提问于2012-02-14得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
