个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我正在构建一个专门针对 iPad 的网站。我正在尝试让拖放工作，但由于某种原因，ondrop 事件似乎永远不会触发。
你能帮我让 div 检测我何时将元素放在它上面吗？
我有一个非常简单的 HTML 页面，它演示了在 Safari 中永远不会触发 ondrop 事件。这在桌面 safari 和 ipad safari 中都失败了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style type="text/css">
<!--
body {
margin: 100px;
}
.dropTarget {
width: 300px;
height: 100px;
float: left;
display: inline;
margin: 10px;
background-color: green;
-webkit-user-drop: element;
}
.drag {
width: 100px;
height: 100px;
background-color: red;
-webkit-user-drag: element; /*element*/
}
-->
</style>
<script type="text/javascript">
<!--
function onDrop(e, ele) { alert("drop"); }
-->
</script>
</head>
<body>
<div class="drag">
</div>
<br/>
<div class="dropTarget" ondrop="onDrop(e,this);">
</div>
<br/>
</body>
</html>
最佳答案
您需要取消 dragover事件的默认操作，然后才能使用 drop事件，否则浏览器将忽略它。
改变你的dropTarget <div>来自:
<div class="dropTarget" ondrop="onDrop(e,this);">
对此:
<div class="dropTarget" ondragover="return false;" ondrop="onDrop(event,this);">
如果您使用内联事件注册，则必须使用 event传递事件而不是 e .
关于javascript - 从未为 Safari 触发 OnDrop 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8782213/
24
4
0
这是我的工作代码: 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
我是一名优秀的程序员,十分优秀！