问题标签 [html5-draggable]

tl;dr在 Chrome 中查看时可拖动的元素在 Chrome 打包应用程序中查看时不可拖动<webview>，为什么？

编辑：

在 Chrome 29.0.1521.3 dev 上测试，在打包的应用程序中仍然没有运气，但 Chrome 本身工作正常。

尝试使用 Chrome 打包应用程序，我想测试 WebView 的功能......显然，在 WebView 中加载的页面的行为应该与从 Chrome 本身查看它的行为完全相同（除了一些功能被禁用）。

我制作了一个应用程序，该应用程序仅包含一个页面和一个<webview>. 内页显示一个<ol>包含三个元素的<li>元素。每个<li>都有draggable="true"属性，但无论我尝试什么，元素都不会对拖动做出反应。

我知道 Chrome 打包应用程序有许多 CSS 声明来避免用户选择文本等，但是那里有什么可以阻止东西被拖动吗？

清单.json

主.js

测试.html

WebViewPage.html

上面的 LI 至少应该在用户拖动它们时做一些事情，但它们根本没有反应。

我第一次玩 HTML5 和 Javascript，但我被卡住了。简而言之，我的问题是如何在以

$(函数() { ... }

基本上我使用了 azure，它为您提供了一个代码项目来启动，但是当它给我文件时，有一个 page.js 以：

azure 服务有一个非常简单的数据库，我需要使用它来创建看板 boardesc 网页。

我使我的任务元素可拖动并添加了事件来处理它，但我无法在这个 JS 文件中创建事件方法，如果我在我的 HTML 中有它，我无法调用 .js 中的任何方法

我问过周围的工作，之前似乎没有人见过 $(function() { ... } 的东西，而且我在任何地方都找不到我需要的信息。

谢谢

我正在尝试创建一个 Ext.Component，我可以将它与 Draggable、Resizable、Float 和 Aloha 编辑器一起使用。

目前我已经尝试过：

这个不允许它是可拖动的，但编辑工作。

这个允许它重新调整大小和拖动，但是它不起作用，因此它是不可编辑的。

同样，这个允许编辑但不能拖动。

似乎当手柄出现调整大小或拖动事件时，aloha 编辑器停止工作，但是如果没有手柄，则拖动和调整大小停止工作。有什么建议吗，或者以前有人遇到过吗？

我知道这里有很多类似的问题，但是，当把它们付诸行动时，我仍然解决了同样的问题。

我有 2 个角度指令（拖放）和一个角度工厂（dndAPI）。这一切都基于fisshy 在 github 上的 Angular Drag and Drop。

我终于让 Firefox 通过向事件添加数据来接受和拖动移动，但是我似乎无法阻止它执行默认行为（并将该数据加载为 url）。我也很抱歉，我根本无法让它在 jsfiddle 上工作......根本。如果有人看不出我是否做错了什么，我会再试一次。

我已经做了很多关于其他问题的建议。我已将 event.preventDefault() 添加到 dragenter 和 dragleave 点。然后当这不起作用时，我将它们添加到任何地方。我觉得这与我的 drop 方法有关。如果我将 event.prevendDefault() 放在绑定的开头，则不会执行其余代码。

任何建议，即使是我可能忽略的小事，都会有所帮助。

谢谢！

我注意到由于某种原因，当 mime 设置为application/json.

在此处查看演示：http: //jsfiddle.net/n7N9p/4/

（在 chrome 和 firefox 中打开该链接，然后尝试将可拖动的 JSON 从一个浏览器拖到另一个浏览器）。

有了它，我已经测试了在不同场景中拖动可拖动对象：

1. 通过文字 作品从铬到铬。
2. 通过application/json 从 CHROME 到 CHROME工作。
3. 从 CHROME 到 CHROME INCOGNITO 通过文字 作品。
4. 通过application/json 从 CHROME 到 CHROME INCOGNITO有效。
5. 通过文字 作品从火狐到火狐。
6. 从 FIREFOX 到 FIREFOX 通过application/json 工作。
7. 通过文本 作品从 FIREFOX 到 FIREFOX PRIVATE WINDOW 。
8. 从 FIREFOX 到 FIREFOX PRIVATE WINDOW 通过application/json 工作。
9. 通过文字 作品从铬到火狐。
10. 通过application/json 从 CHROME 到 FIREFOX不起作用。
11. 从 FIREFOX 到 CHROME 通过文本 作品。
12. 通过application/json 从 FIREFOX 到 CHROME不起作用。

为什么（仅）10 和 12 失败？

这是错误还是安全功能？如果它是一项安全功能，那么为什么它不安全？为什么 3、4、7 和 8 不被认为是不安全的？为什么它总是与设置为的 mime 一起工作text？

我正在使用 html5拖放 api创建日历。

我正在使用dragEnter并dragLeave设置接收元素的样式并确定 droppablity。

接收可放置元素具有子元素，并且dragLeave在拖动子元素时被调用。这个问题是已知的并在此处进行了描述。

我尝试的解决方案是在子级上添加事件dragLeave并将dragEnter逻辑传递回父视图。

这是代码。http://jsbin.com/iHaNuPo/17

问题是子级上的 `dragEnter' 在父级上的 'dragLeave' 之前被调用。

这是事件的顺序。

这是一个错误吗？

任何人都知道一种 Ember'ish 方法来防止父母在将鼠标dragLeave悬停在孩子上时触发事件？

或者一种修复事件触发顺序的dragLeave方法dragEnter？

我应该放弃 html5 原生拖放并使用 jquery ui 可拖放/可拖放吗？

编辑

这是根据伍迪的回答的一个工作示例。

http://jsbin.com/OjAGabUj/22

我正在研究可拖动的 HTML5 列表的实现并遇到了麻烦。

基本上，每当我拖过一个元素时，我都会在我刚输入的元素之前或之后插入我正在拖动的元素。这意味着当您四处移动鼠标时，元素会不断移动到鼠标下方的位置。（我visibility: hidden在元素上设置，所以它显示为一个空格。）当你放下元素时，我会向服务器发送一个 AJAX 调用，描述元素的位置以在服务器上执行移动。

问题是，无论出于何种原因，drop 事件永远不会触发（我的处理程序中的断点永远不会被命中），并且拖动图像会快速回到它开始的位置。（当然，元素已经在页面上移动了，所以它会重新出现在新位置，但是由于 drop 永远不会触发，因此服务器永远不会收到更改通知。）有人知道发生了什么吗？通常的答案是“你需要调用preventDefault()dragenter/dragover”，但我已经这样做了。

我正在使用 jQuery 1.10.2，并且在 Safari 7.0.1 和 Firefox 26.0 中都看到了这种行为。对于它的价值，Rails 4.0.2 是我的这个项目的框架，我正在使用 jquery_ujs 和 turbolinks。

相关代码：

canDropIn()当前是一个总是返回的存根true。sendMovedItem()是执行 AJAX 调用的函数。控制台上没有错误。

http://jsfiddle.net/asutosh/82qum/

这是JS：

在上面的小提琴中，我想创建一个具有列重新排序的表，我可以将列标题设置为可拖动但是在拖动时只拖动标题的图像，我希望整个列的图像应该作为拖动图像，对此的任何建议都会有所帮助。

我目前正在为 HTML5 拖放而苦苦挣扎，因为我想实现一些特定的目标。

我有一个可以使用 HTML5 API 拖动的 div，但我只希望在用户真正想要的情况下进行拖动（因为它会触发更多的处理程序）。

dragstart这就是为什么我在满足某个条件时触发mousemove.

但正如您已经猜到的那样，从dragstart正确触发的意义上说，这不起作用，但没有其他拖动事件（drag，dragend...）。

有什么我没有妥善处理的吗？或者你能看到从鼠标移动处理程序启动浏览器拖放的解决方法吗？（按住鼠标按钮）

提前致谢！

你可以在这里找到一个简单的运行示例

我遵循了这个网站上的教程，它被重新启动，用于创建可拖动的对象。这是代码本身。我的目标是创建一个具有可拖动项目（用于做出决定的项目）和三个不可拖动形状（选项）的游戏。

我不确定如何制作三个不可拖动的对象。我尝试使用单独的功能（即fillSquare）制作三个正方形，以便它们不可拖动，但是当我移动可拖动的项目时它们会消失，从而破坏了我的游戏目的。我很确定我必须使用一些画布状态来将项目保留在屏幕上，但我一直对如何去做感到困惑。下面的代码只是上面发布的链接中的缩短版本。任何帮助表示赞赏。