- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我试图让我的拖放操作在 JavaScript 中正常工作,而不必显式扫描父元素或其他 ID、类循环和其他 hacky magic。
现在当我将元素池中的一个元素拖到灰色区域时,该元素被复制到拖放区(到目前为止一切都是正确的)。我基本上是复制拖动元素的 HTML,清除拖放区(目标)并将新元素添加到其中。
当您在放置区中已经有一些子元素并将其拖到子元素上时,问题就开始了。然后 drop 事件中的目标是子元素,而不是事件附加到的 div。这会导致被拖动的元素清除并将自身复制到子元素中,而不是放置容器中。
预期的结果应该是,无论是将它放在子节点上还是直接放在主放置容器上,目标应该始终是父节点,因为我使用的是事件捕获模式。
这是我在 JS Fiddle 中的示例代码。我正在使用带有捕获的事件监听器,但它似乎无论如何都在进行冒泡阶段并忽略捕获阶段。为什么?
执行此操作的正确方法是什么?
function onDrag(ev) {
var el = ev.target;
//console.log("Drag: " + ev.target.outerHTML)
ev.dataTransfer.setData('text/html', ev.target.outerHTML);
}
function onContainerOver(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move"
}
function onContainerDrop(ev) {
ev.preventDefault();
//console.log("Drop: " + ev.dataTransfer.getData("text/html"))
ev.target.innerHTML = ev.dataTransfer.getData("text/html");
}
document.getElementById('target').addEventListener('drop', onContainerDrop, true); // This should not bubble, but it does. Target is always the child first rather than the element where the event listener resides. Why???
#list {}
.el {
padding: 5px;
margin: 10px;
border: solid 1px black;
background-color: #86d4ff;
cursor: move;
line-height: 1em;
text-align: left;
}
#target {
min-height: 200px;
width: 100%;
background-color: #ffdea6;
border: 1px dashed gray;
text-align: center;
line-height: 100px;
}
<div id="list">
<div class="el" draggable="true" ondragstart="onDrag(event)">ELEMENT A</div>
<div class="el" draggable="true" ondragstart="onDrag(event)">ELEMENT B</div>
<div class="el" draggable="true" ondragstart="onDrag(event)">ELEMENT C</div>
</div>
<div id="target" ondragover="onContainerOver(event)">
Drop Here
</div>
最佳答案
当您将任何东西放在子元素上或子元素上发生任何事件时,事件目标 始终是子元素,因为那是事件发生的地方。这就是目标。
┌─────────────────────────────────────┐
│ ┌────────────────────────┐ │
│ │ Child [Target] │ │
│ └────────────────────────┘ │
│ Parent │
└─────────────────────────────────────┘
然后这个事件作为子元素作为Target和CurrentTarget传递给子元素的事件处理程序
┌─────────────────────────────────────┐
│ ┌───────────────────────────────┐ │
│ │ Child [Target][CurrentTarget] │ │
│ └───────────────────────────────┘ │
│ Parent Element │
└─────────────────────────────────────┘
然后这个事件作为Target的子元素和作为CurrentTarget的父元素传递给父元素的事件处理程序
┌─────────────────────────────────────┐
│ ┌───────────────────────────────┐ │
│ │ Child [Target] │ │
│ └───────────────────────────────┘ │
│ Parent [CurrentTarget] │
└─────────────────────────────────────┘
然后事件以相同的方式依次传递给 dom 树中较高的元素,直到到达顶级元素或任何事件处理程序通过调用 event.stopPropagation( )
那么当您创建事件处理程序并将第三个参数 useCapture 作为 true 传递时会发生什么。
parentElement.addEventListener('click', myClickHandler, true);
在这种情况下,事件首先传递给父元素 [currentTarget:Parent],然后传递给子元素 [currentTarget:Child],但一如既往, 事件目标始终是子元素,因为这是触发事件的地方。
关于当前目标 this MDN WebDocs page说,
Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.
关于javascript - 即使使用捕获阶段,OnDrop 事件目标也是子对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47811676/
这是我的工作代码: function dodrop(event) { var dt = event.dataTransfer; var files = dt.files; var cou
我尝试用 Angular 实现 html5 拖放。 代码是: 在 Controller 中: $scope.drop = function(e) { console.log('a drop') };
我们在 SwiftUI 中为 MacOS 应用程序使用 OnDrop() 函数。它真的很棒。但是,我只想在特殊情况下允许 onDrop 函数。我尝试仅在该条件为真时才在 onDrag 之后执行代码,效
上下文:在网页上工作,以便能够将 csv 文件拖放到其上并将文件中的数据加载到 MySQL 服务器。在 Widnows 7 SP1 上运行,在 Apache 2.4 上运行,使用 Chrome 在本地
我在 JavaScript 中遇到了一个奇怪的问题。我尝试创建一个 div 框,在其中可以放置其他 div。奇怪的是 onDrop 属性没有被分配给 div,尽管如果我读它,它似乎有它。我的错误在哪里
我有一个 div 位于另一个 div 中。两个 div 都有一个 ondrop 属性。当我在子元素的 dropzone 中移动元素时,它会调用 ondrop 函数两次。 child 一次,然后家长再一
我不知道拖放,看了很多教程和问题,但当我放下笑脸时,什么也没有发生。我认为它会起作用,因为它适用于 ondragstart。 HTML: JavaScript: var smiley = docu
我在 JavaScript 中使用 drop 事件通过以下代码上传文件: var fileName = event.dataTransfer.files[0].name; var
我遇到了 OnDrop 方法的问题,它没有被调用,我正在阅读,也许它与 Raycaster 组件有关,但我不确定,我什至不知道,如果有人可以向我解释这一点,我将不胜感激。 这是我在 c# 中的代码加上
我试图让拖放工作,但我正在将一个函数连接到“ondrop”事件,但该函数从未被调用。 这是一个Plunker:http://plnkr.co/edit/qGEdYO8okRZAR3bnZrNk?p=p
我正在使用 jquery 的可排序功能。 请检查图片, 如果我从基础数据中拖动一个项目并将其放入过滤器中,我需要在 Texfields 列上创建一个文本框。 我不想预先填充所有过滤器和文本字段。 因此
我有这个dropZone这是可点击的并打开文件选择的东西。从计算机中选择文件后,它会提供该文件的预览(如果它是图像)。我希望能够拖放相同的文件,并且它执行的操作与单击 div 并打开文件相同。 我尝试
我正在尝试为我的网站添加一个功能,其中有多个图片,并且您必须将图标(海龟)拖到一个框中。我设法找到了一些代码,说明如果拖动正确的图标会发生什么情况。 function allowDrop(ev) {
我有两个 div 框:.box001、.box002。 我想删除每个 drop 上带有 name1、name2、name3 的 p 元素。 当我将 id="1"的 .box002 拖放到另一个 div
我试图让我的拖放操作在 JavaScript 中正常工作,而不必显式扫描父元素或其他 ID、类循环和其他 hacky magic。 现在当我将元素池中的一个元素拖到灰色区域时,该元素被复制到拖放区(到
我正在试用 https://github.com/nhaarman/ListViewAnimations在我的程序中使用的库。特别是拖放支持。 虽然我设法将应用程序调整为 DynamicListVie
我敢肯定这很简单,通常是这样。 $('#sort-table').tableDnD({ onDragClass: "dnd_drag", onDragStart: function(t
下面是我尝试使用的示例代码,它是 react + TypeScript。onDragEnter 和 onDragOver 工作正常,但 onDrop 事件不正常。 import * as React
我正在尝试传递回调,以便我可以在提交表单之前使用 ImageInput 保存文件/图像..我很好奇如何做到这一点.. onDrop、onChange 等.. 不要执行任何操作。谢谢! const ca
我想从图像拖动到这样的跨度: 从这里拖动 放在这里: DROP HERE 拖放处理程序: dragStartHandler = (idx) => (event) => { console
我是一名优秀的程序员,十分优秀!