如何使div在阴影DOM中可拖动？
要使div在阴影DOM中可拖动，可以通过以下步骤实现：
- 首先，确保目标div元素具有可拖动的属性。可以通过CSS的
draggable属性来实现，将其设置为true。 - 首先，确保目标div元素具有可拖动的属性。可以通过CSS的
draggable属性来实现，将其设置为true。 - 接下来，需要为div元素添加拖动事件的监听器。可以使用JavaScript来实现，通过监听
dragstart、drag和dragend事件来实现拖动功能。 - 接下来，需要为div元素添加拖动事件的监听器。可以使用JavaScript来实现，通过监听
dragstart、drag和dragend事件来实现拖动功能。 - 最后，需要创建一个阴影DOM作为拖动的目标。可以使用
drop事件来创建阴影DOM，并在dragover事件中阻止默认的拖放行为。 - 最后，需要创建一个阴影DOM作为拖动的目标。可以使用
drop事件来创建阴影DOM，并在dragover事件中阻止默认的拖放行为。
通过以上步骤，就可以实现将div元素拖动到阴影DOM中的功能。在实际应用中，可以根据具体需求对拖动事件进行进一步的处理，例如限制拖动范围、添加动画效果等。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接：https://cloud.tencent.com/product/cvm
相关·内容
2回答
JavaScript -标识没有id的拖放元素
javascript、drag-and-drop
我想使用拖放复制元素。
大多数示例(包括Mozilla中的示例)假设正在拖动的元素有一个id，然后您可以使用它来克隆它。然后，在使用id对象时传递这个dataTransfer。但是，这具有有限的可伸缩性，因为您需要对每个元素都有一个唯一的id。
是否有一种无需使用id即可传递拖动元素的方法？
var droppable = document.querySelectorAll('.droppable');
var draggable = document.querySelectorAll('.draggable');
draggable.forEach(ta
浏览 6提问于2022-10-02得票数 0
2回答
拖动事件未在角度为2时触发
javascript、angular
我有一个画布，我希望用户能够拖动它周围的图形元素。因此，我不希望画布本身被拖动，但我希望在鼠标执行这些操作时处理dragstart、拖放和拖放事件。
我使用的是Angular 2，所以我有：
<!-- editor.component.html -->
<div #rendererContainer
draggable="true"
(dragstart)="onDragStart($event)"
(drag)="onDrag($event)"
(dragover)="onDrag($event)&#
浏览 1提问于2018-04-24得票数 7
回答已采纳
1回答
重新排序元素后不调用Dragstart
javascript、dom-events、aurelia
我正在尝试创建一个列表，它可以通过拖动其中的项目来重新排序。
当我第一次拖动一个元素时，dragstart.trigger="drag($event)"调用drag(e)。在drag(e)中，我设置了拖动元素的数据。
在删除拖放元素时，drop.trigger="drop($event)"调用drop(e)。在drop(e)中，我获取被拖动的元素，并将其从list/parent元素<ul>中删除。之后，我将拖放元素插入到已删除的位置。
问题是一旦一个元素被拖动。我不能再次将它拖到不同的目标上，因为dragstart.trigger="drag
浏览 0提问于2018-03-17得票数 1
回答已采纳
1回答
基于JavaScript的拖放函数
javascript
完全新的/新手与JavaScript，并试图做一个简单的拖放功能。由于某些原因，这方面根本不起作用，补充说，console.log检查网站是否甚至认识到正在发生的事情，它不会反弹，即使在那里。我在html端有“可拖动”和“可下垂”两个元素。
const draggableElements = document.querySelectorAll(".draggable");
const droppableElements = document.querySelectorAll(".droppable");
draggableElements.forEach(el
浏览 2提问于2020-09-06得票数 0
回答已采纳
1回答
如何将拖拽的项目放在原来的屏幕位置？
javascript、html、drag-and-drop
在这个拖放过程中，我希望将拖动的HTML元素放在鼠标离开的位置，但当前它将控件放在最左上角。我将元素放在拖放目标的目录中，我还没有代码可以展示，因为我还不知道如何做到这一点，如何在拖动操作结束时获得坐标，并在最终的拖动目录中的相同坐标中插入HTML元素。
带有图像的示例。假设我将HTML元素拖到这个位置：
HTML应该留在那里，而不是转到最左上角：
我的代码如下所示：
<style>
.toolbox {
height: 250px;
width: 150px;
border: solid 3px #ccc;
margin: 10
浏览 26提问于2021-06-13得票数 0
1回答
拖放API停止在Android上使用自定义MIME类型
javascript、android、html、google-chrome、drag-and-drop
问题：是否存在在Android上拖放的已知问题，或者我是否不正确地使用拖放API？(如果两者都没有，我将假设这是一个bug，并向Chrome提交报告)。
问题:我正在实现一个简单的拖放界面，看起来很好，但在我测试的3种设备/浏览器组合中，有1种表现得很奇怪。我已经确定问题在于我在'text/custom'元素的'dragstart'事件上设置的自定义MIME类型draggable的规范，但是我在Living或MDN中读到的任何东西都没有让我相信这应该是一个问题。
它在我的桌面上(Windows 10, Chrome 97.0.4692.71)和我正在测试的iPh
浏览 2提问于2022-01-12得票数 1
回答已采纳
2回答
问题:优先拖放克隆对象
javascript、drag-and-drop、clone
为了保持原始元素的位置，我想克隆它并拖动克隆的元素。到目前为止，它是有效的。但是如果我在要克隆的元素上执行"doubleclick“(在拖动之前)，我会得到两个克隆的对象，拖放会插入两个而不是一个元素。有人能帮我解决这个问题吗。我尝试使用mouseup的额外的eventlistener。我没有找到解决办法。我想这很简单，但目前我看不出来...谢谢你的帮助！
下面是我整个代码的精简部分：
let basicElement = document.getElementById('basicElement');
basicElement.addEventListener(
浏览 14提问于2021-06-12得票数 0
2回答
如果元素具有此id和类，如何隐藏它
javascript、html、css
我这里有这个div，我在拖放API中使用它：
<div class="box student" draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>
如果我拖动这个元素：
<div class="box c1r1" draggable="true" style="background-color
浏览 1提问于2022-01-24得票数 0
回答已采纳
1回答
javascript拖动事件未注册
javascript、html、vue.js、drag-and-drop
每当DOM对象被拖放到html5画布上时，我都试图调用处理程序函数，但是由于某种原因，事件没有被触发。
据称，我正在寻找的活动是drop或dragend。这是直接从这个参考。
dragend -拖动操作正在结束(通过释放鼠标按钮或单击转义键) drop -一个元素被拖放到一个有效的目标上。
下面是我设置的一个简单测试用例的JS小提琴。我设置了记录器函数，这样就可以测试触发了哪些事件。一个橙色的帆布上有一个按钮和一个黑点的图像。黑点和按钮都是可拖动的元素。当它们被拖放到画布上时，不会触发drop或dragend事件。为什么不行？
唯一被触发的拖动事件是dragover！
HTML
<di
浏览 0提问于2018-01-17得票数 2
回答已采纳
2回答
使用JavaScript拖放n个
javascript、html
我已经开始学习JavaScript了。我尝试使用以下方法将图像拖放到名为“dropTarget1”的dropzone中；该图像不可拖动。你能看看我的代码，告诉我哪里做错了吗？
var draggable=document.getElementById('dragMe1');
draggable.addEventListener('dragstart',dragStart,false);
var droptarget=document.getElementById("dropTarget1");
droptarget.addEventL
浏览 0提问于2016-10-13得票数 0
1回答
Javascript拖放更改div dragDrop
javascript
如何才能拖放替换我拖放的元素，拖放所有implemented.only我不能替换的div。可以替换的功能是可以替换的。只有javascript.please能帮我。
const dragAndDrop = () => {
const zono1 = document.querySelector('.zono-1');
const zono2 = document.querySelector('.zono-2');
const zono3 = document.querySelector('.zono-3');
浏览 15提问于2021-02-19得票数 0
回答已采纳
1回答
在javascript中保存拖放位置
javascript、html、css
所以我有这个拖放脚本。我想要做的是保存拖放物品的位置。所以如果有人刷新页面。拖动的图像应该保持在同一个位置，我只想在javascript中这样做。
.fill {
background-image: url('https://source.unsplash.com/random/150x150');
height: 150px;
width: 150px;
cursor: pointer;
}
.hold {
border: solid 5px #ccc;
}
.
浏览 1提问于2018-12-20得票数 5
回答已采纳
1回答
本机拖放目标不能被丢弃(但它的子级可以)
javascript、html、drag-and-drop
我正在尝试使用HTML5本机拖放实现行的重新排序:只需拖动即可对行进行重新排序。源也是目标，当被删除时，源移动到目标的前面。
此示例部分工作，但问题是，只有当拖放到目标拖放目标的一个子输入类型元素时，拖放才会成功。为什么drops只对这些子元素成功，而不是它们的父行div？
function handle_dragleave(ev) {
ev.preventDefault();
ev.stopPropagation();
ev.currentTarget.setAttribute('style', "border-top:none;");
}
浏览 1提问于2018-02-06得票数 0
回答已采纳
2回答
html5拖动事件中的X和Y值在不同浏览器中不一致
html、google-chrome、firefox、safari、drag-and-drop
在Chrome、Safari和Firefox中查看以下jsFiddle。它应该能很好地解释我所看到的。
总而言之，拖动和拖动事件要么没有x和y值，要么有奇怪的x和y值。
(参见下面粘贴的代码)
这些是浏览器中的bug吗？我们能期望浏览器在拖动和拖动事件中最终会有合理的x和y值吗？我们能期望FireFox最终支持offsetX和offsetY以及拖拽/拖放/拖放事件吗？
谢谢，内特
html：
<aside draggable="true" id="dragme">
Drag Me
</aside>
<aside drop
浏览 1提问于2013-12-10得票数 8
1回答
如何使div在被拖动时跟随鼠标
javascript、html、css、drag-and-drop、draggable
我正在为我的一个客户在Fiverr上创建一个小网页。他想要一个拖动和dropbox，当您拖动图像时，拖动图标(鼠标拖动时所持有的图像)会变大，不透明度也会发生变化。我已经做过这件事了，但是当我把这张照片拖过来的时候，它是非常慢的。请帮助我，因为我刚开始使用javascript，我不知道该怎么做。
Index.html
<div draggable="true">
<section class="boxes first">
<div draggable="true">
<img
浏览 2提问于2022-04-20得票数 0
1回答
拖放带有限制的HTML
javascript、jquery、html、css、jquery-ui
我正在尝试创建一个基于HTML5 / Bootstrap的拖放工具，但没有太多成功，它具有可以预设的限制。
解释这一点的最好方法是食物菜单创建者。所以我想要的是有一个3列div左侧的配料列表，网站用户可以从预设的配料列表中拖动项目，并将它们放入菜单日历中，这将显示在页面右侧的9列div中。
我可以使用以下脚本完成此操作-
JavaScript：
function dragstart_handler(ev) {
console.log("dragStart");
// Change the source element's background color to s
浏览 3提问于2016-11-06得票数 0
1回答
uses状态控制台日志更新状态，尽管稍后拖放时它使用以前的状态
javascript、reactjs、typescript、react-hooks
我正在环境中开发一个应用程序，我面临着一个我自己无法解决的问题。每当我试图将state设置为它的初始值时，我就会更新UI，尽管console.log( state )仍然会返回以前的状态。当我使用依赖于我的状态的console.log使用useEffect时，我会打印出更新的值。
我最关心的是，当用户执行拖放交互时，如何反应“保存”以前的状态并使用它。
const [board, setBoard] = useState(initialState);
function clearBoard(){
updateBoard(initialState)
console.lo
浏览 3提问于2022-09-22得票数 0
回答已采纳
1回答
当我使用HTML拖放API时，draggable没有工作
javascript、html
这是我的密码：
var dragged
document.addEventListener("drag", function (event) {
}, false)
document.addEventListener("dragstart", function (event) {
dragged = event.target
event.target.style.opacity = .5
}, false)
document.addEventListener("dragend
浏览 1提问于2018-10-04得票数 0
回答已采纳
1回答
拖放的几个问题
javascript、html
我有一些类似附加代码的东西，其中一些绿色的div可以在列表元素之间拖放。
有两个问题我似乎无法解决：
1)在较大的Take Me div中，被拖拽的“幽灵”图像几乎看不见。用户对被拖动的内容知之甚少。这种情况能以某种方式改变吗？
2)拖放目标为鼠标指针下的拖放目标。这是非常合乎逻辑的，但它使用户很难理解绿色将被放在哪里。如果它是被底部拖动的，那么当释放鼠标按钮时，绿色会向下跳跃很大。有没有办法让重影图像的顶部捕捉到指针？
在最终的应用程序中，将有许多绿色的div，用户应该能够将它们放在一起，而不会重叠，因此清楚地知道正在拖动的内容和精确的放置是很重要的。
我最好不要使用拖动事件，而是以老式的方
浏览 0提问于2018-12-19得票数 5
1回答
如何在本机拖动事件之后获取mouseup事件？
javascript、safari、drag-and-drop
WHATWG 的实现支持dragstart、drag和dragend事件。
当可拖动对象返回到原始位置时，dragend事件会触发，例如，尝试尽可能地拖动红色框并释放它。dragend (和"END!“console.log消息)将不会触发，直到拖放元素返回到原始位置(这在Safari浏览器中是最明显的)。
var handle = document.querySelector('#handle');
handle.addEventListener('dragend', function () {
console.log('END!
浏览 0提问于2014-10-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
