使dragula在悬停在元素上时显示放置位置
Dragula是一个轻量级的JavaScript库，用于实现拖放功能。当使用Dragula库时，可以通过添加一些自定义代码来实现在悬停在元素上时显示放置位置的效果。
要实现这个效果，可以按照以下步骤进行操作：
- 引入Dragula库：在HTML文件中引入Dragula库的JavaScript文件，可以通过CDN链接或本地文件引入。
- 创建容器元素：在HTML文件中创建一个容器元素，用于包含需要拖放的元素。
- 添加拖放元素：在容器元素中添加需要拖放的元素，可以使用HTML标签或动态创建元素。
- 初始化Dragula：在JavaScript代码中，使用Dragula库的
dragula()函数初始化拖放功能。将容器元素作为参数传递给该函数。 - 添加事件监听器：使用Dragula库提供的事件监听器，监听拖放过程中的各个阶段。在悬停在元素上时，触发相应的事件处理函数。
- 显示放置位置：在悬停在元素上时，通过修改元素的样式或添加辅助元素来显示放置位置。可以使用CSS属性
outline、border等来突出显示放置位置。
以下是一个示例代码，演示了如何使用Dragula库实现在悬停在元素上时显示放置位置的效果：
<!DOCTYPE html>
<html>
<head>
<title>Dragula Example</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css">
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<script>
// 初始化Dragula
var container = document.getElementById('container');
var drake = dragula([container]);
// 添加事件监听器
drake.on('drag', function(el, source) {
// 拖动开始时的处理
});
drake.on('dragend', function(el) {
// 拖动结束时的处理
});
drake.on('dragover', function(el, container) {
// 悬停在元素上时的处理
// 显示放置位置的效果
el.style.outline = '2px dashed red';
});
drake.on('dragout', function(el, container) {
// 离开元素时的处理
// 移除放置位置的效果
el.style.outline = '';
});
</script>
</body>
</html>在上述示例代码中，通过添加dragover事件监听器，在悬停在元素上时将元素的边框样式设置为虚线框，以显示放置位置。在dragout事件监听器中，将边框样式重置为空，以移除放置位置的效果。
请注意，以上示例代码中的Dragula库版本为3.7.2，你可以根据需要选择最新版本的Dragula库。此外，还可以根据具体需求进行样式和交互的定制。
相关·内容
我有一个与dragula一起工作的拖放功能，这样它就可以创建元素，并将元素作为子元素放入其中。这个想法是，您可以使任何元素成为一个容器来容纳子项。我遇到的问题是，在我将可拖动的元素悬停在上面之前，我不希望拖放位置可见。当在页面周围拖动一个元素时，它会呈现所有的父容器-但我真的只希望它在悬停在可以创建它的地方时出现。少量的项目并不是什么大问题，但是当你获得100+项
浏览 36提问于2019-09-19得票数 1
正如你在下面的链接中所看到的，当你将鼠标悬停在标高上时，它也会在地图上显示该路线的点。我在google中唯一能找到的类是elevation along a path，这不是很有用！当在谷歌地图中搜索路线时，高程剖面不知何故知道路线上的实际道路高程，因此它相当准确地表示了陡峭悬壁上的桥梁(而不是显示陡峭的坡度)。通过下面链接的桥梁将产生elevation API的急剧下降，因为它知道在地理上有悬崖，而它不知道提供的lat-lng<
浏览 1提问于2017-03-19得票数 1
1回答
我在IE8中有一个input元素只有当我的鼠标悬停在输入框中的空白处时，才会显示工具提示。如果框中填充了文本，则不会显示工具提示。
有什么想法吗？
浏览 1提问于2012-11-30得票数 2
1回答
如果我使用<img src='Assets/image.png'>some text</img>来获取要显示的“一些文本”，可以吗？我知道我可以只使用div并设置div样式以显示在图像的顶部，但我想知道的是，是否可以以任何方式使标签中的文本显示出来。
浏览 0提问于2015-10-15得票数 3
回答已采纳
我在一个项目上有个问题。一旦选择了要使用的小部件，就可以更改它们的组织布局。">)的+按钮时，会显示一个隐藏的div<ion-grid id="modules-list"> <i
浏览 5提问于2018-04-03得票数 2
6回答
有没有办法将鼠标悬停在已经隐藏的元素上。我正在尝试模仿Steam在主页上的箭头导航功能。您会注意到，当您第一次到达页面时，没有显示箭头：然后，当您将鼠标悬停在应该有箭头的区域上时，它会自动显示出来：我已经尝试将包含箭头图像的div设置为display: none，也尝试了有没有其他方法可以从一开始就隐藏这些div，但仍然可以让鼠标悬停事件在它们上面工作？
浏览 0提问于2011-12-22得票数 24
回答已采纳
我有一个使用ng2-dragula的Angular2组件，可以像这样拖放： selector: 'my-comp', DragulaDragulaService template: ` <div *ngFor="#item of items" [dragula</div>
</
浏览 6提问于2016-03-14得票数 7
回答已采纳
1回答
我有一个svg组，当我将鼠标悬停在它上面时，我想显示这个组的其他元素。我把代码放在相反的位置(例如，当我将鼠标悬停在g上方时，附加的元素是隐藏的)：很抱歉，我不能使用内置的堆栈溢出代码查看器，它以某种方式拒绝工作我认为问题在于，即使在hove事件被触发之后，围绕按钮的body标记仍然停留在
浏览 1提问于2017-09-08得票数 1
回答已采纳
使用可以在状态框中拖放的Task(待办事项、待办事项和完成事项)。我使用来实现拖放功能，并希望实现一种使用Angular 2管道过滤任务的方法。但是当我拖放任何任务时，它就消失了，再也找不到了。有没有办法同时使用dragula和Angular 2管道？
浏览 4提问于2017-06-29得票数 0
我正在使用库dragula来做一些拖放的事情。 Dragula在内部使用cloneNode(true)创建被拖动元素的副本，该副本将被附加到主体以在拖动时显示预览图像。不幸的是，如果拖动一个聚合物元素，绑定的数据不会被克隆。因此，被拖动元素的内容(例如<div>[[someString]]</div>)是空的。 对此有解决方案吗？实际上，我不需要将数据绑定到我的元素，它只是一个“只读
浏览 16提问于2019-02-05得票数 0
回答已采纳
1回答
jQuery工具提示悬停循环动画
、、、、
我在jQuery中创建了一个自定义的工具提示系统，它创建了一个带有CSS样式的新元素，将其放置在所有其他项的上方并放置在适当的位置。一切正常工作，但当鼠标移动到工具提示上时，由于悬停在父对象上而导致的任何动画都将开始循环。下面是我的代码：
浏览 0提问于2012-10-10得票数 0
回答已采纳
1回答
我在卡片和工具提示中使用Angular - Clarity。这里的工具提示是隐藏在卡内…我只需要工具提示显示或不切断在卡上，内部内容需要是自由滚动/自动。事实上，我已经寻找了很多答案，但对我来说都不起作用。
浏览 14提问于2019-08-21得票数 2
我有一个div，当我将鼠标悬停在它前面的链接上时，我想弹出它。悬停效果很好，但是div里面似乎有一个链接，我希望人们能够点击它，但当我试图转到它时，它就消失了。
浏览 0提问于2013-07-18得票数 0
回答已采纳
1回答
我正在尝试使用jquery mobile和CSS3 (没有javascript计算)在屏幕上居中显示一个具有固定高度和宽度(750x360)的对话框。这将在IPad移动safari上运行，到目前为止，我还没有找到可以在该浏览器上运行的calc()版本。
我目前正在使用javascript计算页边距-顶部。参数是窗口的可变高度和对话框的固定高度。
浏览 1提问于2012-06-28得票数 0
回答已采纳
为了在不让非技术人员将嵌入代码粘贴到网页上的每个所需位置的情况下放置外部小部件，我正在开发一个可视化的div和p标签选择器，人们可以在其中精确定位所需的元素。当用户将鼠标悬停在某个元素上时，它将显示一个红色边框，以显示所选内容。$(document).on('mouseenter mou
浏览 13提问于2019-07-29得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
