- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在尝试找出一种通过 javascript 的 event.dataTransfer 传递 native 对象以进行拖放的方法。我正在编写 CMS 的前端编辑器部分,并希望用户能够拖放元素(许多不同类型的元素,从文件到图像到 HTML 片段到几乎任何东西)。这就是为什么我想传递一个真实的对象,这样我就可以将数据附加到它以指定了解如何呈现它所必需的东西。
一种解决方法是使用 jQuery 的 .data() 将对象附加到页面上的其他内容,然后简单地在 setData 中传递选择器字符串...但我不是特别喜欢这种 hack。
这也可以通过 jQuery UI 的可拖动/可放置来解决(我并不完全反对使用任何库),但由于拖放区位于 iframe 中,这实际上是最新 jQuery UI 中记录的错误( 1.10.2).另外,如果可能的话,我强烈希望在本地进行。此应用程序中已经有足够的库。
这里是问题所在:http://jsfiddle.net/AHnh8/
var foo = {foo: "foo", bar: "bar"};
$dragme.on("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("foo", foo);
});
$dropzone.on("dragenter", function(e) { e.preventDefault(); });
$dropzone.on("dragover", function(e) { e.preventDefault(); });
$dropzone.on("drop", function(e) {
console.log(e.originalEvent.dataTransfer.getData("foo")); // [Object object]
console.log(typeof e.originalEvent.dataTransfer.getData("foo")); // string
});
现在,在阅读了规范之后,我完全理解了为什么会失败。我不明白的是,如何最终实现我想要的。
谢谢
最佳答案
在使用 setData
之前,您应该将对象传递给 JSON.stringify
,因为您只能存储字符串。
var j = JSON.stringify(foo);
e.originalEvent.dataTransfer.setData("foo", j);
反过来你必须将字符串重新转换为一个对象:
var obj = JSON.parse(e.originalEvent.dataTransfer.getData("foo"));
console.log("foo is:", obj);
参见 this工作 fiddle
关于jquery - 通过 dataTransfer 传递对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15839649/
我正在玩 drag-and-drop API并且有两种从 DragEvent.dataTransfer 收集文件的方法,有 readonly files: FileList 和 readonly it
这个问题已经有答案了: How to upload and list directories at firefox and chrome/chromium using change and drop
有什么区别 event.originalEvent.dataTransfer.files 和 event.dataTransfer.files ??? 因为在拖放中,第二个代码不起作用,它是未定义的,
我正在使用 Vuejs 和 DataTransfer 异步上传文件,并且我希望允许一次拖放多个文件以进行上传。 我可以进行第一次上传,但在上传完成时,Javascript 已经收集垃圾或更改了 Dat
我的拖放项目出现问题,当我拖动时出现错误:“e.dataTransfer 未定义” 拖动功能 dragstart: function(e) { e.dataTransfer.effectAll
尝试在拖放序列期间将 jQuery 对象传递到 dataTransfer 属性。将属性添加到 jQuert.event.props 数组后,我可以分配它,但它在 drop 事件期间返回 undefin
我执行以下操作: const blockOrField = new Block(); ev.dataTransfer.setData("data", blockOrField); 当我在另一个地方获
我正在尝试编写一个测试来检查我的 dragstart 事件监听器是否在 e.dataTransfer 上设置了属性。 我可以手动创建和调度 MouseEvent: var event = new Mo
我正在尝试创建一个 dragEvent 并在 Chrome 上使用以下代码以编程方式触发它: var ev = document.createEvent("MouseEvents"); ev.init
我正在构建一个简单的拖放 uploader ,我想知道为什么我在 console.log(e) (DragEvent) 时看不到我拖放的文件并查看 DragEvent.dataTransfer.fil
我正在尝试找出一种通过 javascript 的 event.dataTransfer 传递 native 对象以进行拖放的方法。我正在编写 CMS 的前端编辑器部分,并希望用户能够拖放元素(许多不同
编辑 此问题的根源在于 Sami 所确定的 Edge 浏览器的行为。 Firefox 做同样的事情,但 Chrome 工作正常。 原始问题 我有一个放置容器供用户拖放图像以设置 与图像。 如果从不同的
我有一些使用 HTML Drag interface 的 React 组件. 特别是我听dragover一个组件上的事件并使用 DataTransfer 设置 x 和 y 位置目的。然后,我听drag
我正在使用一个名为 react-dropzone 和 React-Redux 的 Node 包模块来允许用户将文件拖到窗口上并显示文件信息。 react-dropzone 组件为我提供了标准 even
我的组件中有以下元素: 下面是函数onInput: onInput(event) { event = event.nativeEvent; console.log(event.dat
在拖拽开始时,我试图将文本附加到拖动的图像上。这样我就可以稍后在 drop 方法中识别它: var drag = function(event){ event.originalEvent.d
我正在实现一个功能,其中 dataTransfer 中的数据将在 dragstart 事件上设置,当用户尝试拖动其他元素时将手动调用该事件。所以我使用这个 jQuery 来触发 dragstart 事
可以使用dataTransfer设置多个吗? HTML JS function drag(ev, format, color) { ev.dataTransfer.setData("text
我尝试使用DataTransfer.mozSetDataAt() jsfiddle 中的方法 script它抛出 SecurityError: The operation is insecure. 这
event.dataTransfer.setData中的数据类型在firefox和IE中冲突。IE不支持'text/html'。所以我应该使用'text'。问题是firefox不支持'text'。它单
我是一名优秀的程序员,十分优秀!