如果另一个可拖动的div已经在里面，请不要让它进入
，这是一个关于拖放操作的问题。拖放操作是指在前端开发中，将一个元素从一个位置拖动到另一个位置的操作。
为了实现这个功能，可以使用HTML5中的拖放API。拖放API包括两个主要事件：dragstart和dragover。当拖动元素开始时，会触发dragstart事件；当拖动元素进入目标区域时，会触发dragover事件。
要实现禁止拖动元素进入目标区域的功能，可以在dragover事件中阻止默认行为。具体的实现步骤如下：
- 给目标区域的div元素添加一个事件监听器，监听dragover事件。
- 在事件监听器中，使用event.preventDefault()方法阻止默认行为，即禁止拖动元素进入目标区域。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#target {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
var target = document.getElementById("target");
target.addEventListener("dragover", function(event) {
event.preventDefault(); // 阻止默认行为，禁止拖动元素进入目标区域
});
</script>
</body>
</html>在上面的示例中，id为"target"的div元素是目标区域，通过addEventListener方法添加了一个dragover事件监听器。在监听器中，使用event.preventDefault()方法阻止了默认行为，即禁止了拖动元素进入目标区域。
这样，当另一个可拖动的div已经在目标区域内时，再次拖动其他div进入目标区域时，就会被禁止进入。
关于拖放操作的更多信息，可以参考腾讯云的相关产品文档：
相关·内容
2回答
如果另一个可拖动的div已经在里面，请不要让它进入
javascript
我在这里有两个可拖动的div，要在另一个div中拖动，但如果一个可拖动的div已经在拖动目的地中。它不应该允许另一个div进入function start(e) {
e.dataTransfer.effecAllowed = 'move'; //
浏览 53提问于2017-06-16得票数 0
1回答
JQuery可拖动-奇怪的行为
javascript、jquery、jquery-ui、draggable、jquery-ui-draggable
我有一个可拖动的元素，我正在创建它的克隆，并将其拖动到拖放区。我希望可拖动元素一旦在拖放区中被正确设置，就可以被重新拖动。
当我将可拖动的div封装在另一个div中时，出现了奇怪的行为。当它被封装时，它不会将克隆元素设置为draggable，因此我不能重新拖动该元素。但是，如果在jFiddle
浏览 10提问于2013-01-29得票数 1
回答已采纳
2回答
拖放取消触发模糊事件
javascript、jquery、drag-and-drop
我有一个拖曳的div，当然可以拖来拖去。在里面，我有两个事件的输入文本(焦点和模糊)。同样在内部，我有另一个div作为可拖动的取消div (拖动该div防止任何拖动发生)。你可以在这里看到它：
单击或拖动主
浏览 3提问于2012-03-28得票数 0
回答已采纳
1回答
删除可排序列表jQuery中的项并避免重复
jquery、jquery-ui-sortable、jquery-ui-draggable
我在jQuery中使用可拖动列表和可排序列表。我的要求是
因此，我想出了一个逻辑，如果项目已经存在于可排序列表中，则将其还原为可拖动列表，并将项目从可</e
浏览 3提问于2014-03-15得票数 0
1回答
jQuery UI -取消从可拖动对象添加到可排序对象
jquery-ui、jquery-ui-sortable
我有两个div，一个是可拖动的，另一个是可排序的。我尝试使用cancel()，但它似乎不起作用。
浏览 4提问于2012-10-19得票数 0
1回答
Jquery可排序portlets:切换两个portlet的位置
jquery、jquery-ui-sortable、switching
elit</div></div>
我想要发生的是，当将portlet放在另一个列中时，portlet可以切换或交换位置(因此，已经在当前拖动的portlet进入的列中的portlet将进入被拖动的portlet的来源)。我认为是有用
浏览 5提问于2013-08-16得票数 1
回答已采纳
1回答
jquery拖放还原选项
jquery、jquery-ui、jquery-ui-draggable
在html中，我有一个列表，列出了10个可拖放的div，称为stacks，还有另一个列表，列出了10个可下垂的div，称为堆栈。每个堆将有唯一的id，将匹配一个堆栈div。如果堆与堆栈不匹配，则可拖动的div应恢复到其默认位置。
如果堆与堆栈匹配，则可拖动的div将放置在该堆栈中。当我将匹
浏览 1提问于2013-10-16得票数 1
6回答
jQuery可拖动和溢出问题
jquery-ui、drag-and-drop
当我从一个设置为overflow: scroll的容器div中拖动一个div时，我有一个不想要的效果。我找到了其他人的一个例子，他们遇到了这个问题，但我一直无法找到解决方案
发生的事情是滚动增加了，我可以理解为什么这是你想要拖动到可滚动div中的目的地，但我希望能够将它带到滚动抓取之外。
浏览 4提问于2009-05-01得票数 78
回答已采纳
1回答
关于编写/扩展JQuery拖放的建议，因此DIVs也可以作为拖放区域
javascript、jquery、jquery-ui
我想编写一个JQuery插件，这样我就可以将一个DIV拖放到另一个DIV上。如果另一个DIV不是dropzone，那么它只是调用我选择的函数。也许将一个可拖动的DIV放到另一个可拖动的DIV上已经存在，这将是完美的，但我还没有找到它。
如果
浏览 1提问于2014-04-09得票数 2
2回答
jQuery容器在chrome、safari上不起作用
jquery、google-chrome、safari、drag-and-drop、jsplumb
我在我的代码中添加了一些可拖动的对象，这与容纳性有关。在chrome中，对象可以移动到div的外部，因为容器不工作。下面是我的示例网址：
(当您将对象拖到右侧末端，然后将另一个对象拖到右侧，它可以移动到div之外时会发生这种情况)请帮帮我
浏览 0提问于2012-06-08得票数 0
回答已采纳
1回答
将div从多个其他div下面拖出
javascript、jquery、jquery-ui、jquery-ui-draggable
我一直在尝试为我们正在制作的we应用程序创建一个测试用例，我已经相当接近解决方案了，但最后的部分让我感到困惑……
我们需要能够拖动div(没有问题)，但是一些div需要锁定在适当的位置(同样，没有问题)当一个可拖动的div卡在一个不可拖动的div下面时，问题就出现了。我已经在一定程度上修复了这个问题，但只有当在可</em
浏览 0提问于2013-06-15得票数 3
回答已采纳
4回答
可拖动的div --有什么意义呢？
html、draggable
我已经在jQuery、.Net Ajax和普通的旧javascript中看到了许多可拖动div的实现。虽然他们都是新奇的，并以不同的容易解决了问题，但我从来没有理解过重点是什么。可拖动div的值是什么？可拖拽的div实现了什么用例？
是否存在可拖动div改善用户体验的
浏览 0提问于2009-11-10得票数 0
回答已采纳
1回答
JQuery拖放如何与新拖动的项目交换已拖动的项目
javascript、jquery、jquery-ui、drag-and-drop
我有一组div，可以拖到另一组div上。revert: 'invalid', }); accept: '#mapColumns div',
drop: handleCo
浏览 0提问于2011-11-23得票数 0
2回答
在特定位置拖放+占用主分区可用的空间
jquery、html、css、jquery-ui、drag-and-drop
我有一个主div -它是可删除的图1
图2
现在，如果我拖动第四个可<
浏览 5提问于2016-05-27得票数 2
回答已采纳
1回答
jQuery可拖动图像，当鼠标超出边界时停止拖动(Div)
c#、jquery、jquery-ui、composite-controls
我有一个在div中运行的可拖动的图像。然而，我想这样做，如果当用户按下鼠标并拖动元素/ div时，当鼠标按下或其边界离开div时，它将不再可拖动。当按下控件上的按钮时，将启用拖动，该按钮将正常工作。我只是希望能够在鼠标超出特定div /元素的边界时停止拖动。
这是复合控件的
浏览 6提问于2012-03-21得票数 3
回答已采纳
1回答
使用Vue中的计算函数过滤基于多维数组的数组时出现问题
arrays、vue.js
使用vue，我尝试基于以下逻辑更改/更新数组( draggables )：如果对象存在于数组(Drozone)的另一个数组中，它将从draggables中删除 每个可拖动对象只能在与可拖动对象dropID匹配的多维数组的索引中找到。我尝试过的每种方法要么返回所有可拖动的项，要么不返回可拖动的<
浏览 36提问于2020-09-22得票数 0
回答已采纳
2回答
固定旋转父对象内可拖动div的鼠标方向
jquery、jquery-ui、rotation、draggable、jquery-rotate
请看我的来理解我的问题:黄色是父div，你可以使用红色的圆圈旋转它，它也是可拖动的，在这个div里面有另一个带有黑色边框的div，我们可以认为它是对蓝色圆圈的限制。蓝色的圆圈是可以在容器边界内拖动的，只需要y坐标，如果你旋转黄色的div ex，问题就会发生；
浏览 5提问于2016-04-04得票数 5
1回答
在jquery可拖动的内容可编辑div中选择文本
javascript、jquery、html、jquery-draggable
我有一个可内容编辑的div，它是另一个div的子级，使用jquery将其转换为一个可拖动的元素。<div id="draggable"></div>
$('#
浏览 0提问于2013-04-09得票数 1
回答已采纳
1回答
如何强制jquery拖放在mouseup调用后重新启动
jquery、jquery-ui、draggable、jquery-ui-draggable
我有一个可拖动的div #box，可以在一个更大的#仪表板中移动，我只能通过另一个div看到它，它比仪表板#window要小。因此，在window mouseleave (同时拖动)上，我绑定了一个setInterval，它开始向相反的方向移动#仪表板。我注意到可拖动的#box停止移动，因为当用户退出窗口时(当他按下窗口时)，用户停止移动鼠标，希
浏览 4提问于2012-09-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
