Tag: 拖放

HTML5拖放effectAllowed和dropEffect: 这两个属性之间的关系似乎是一些混乱的根源。基于读取MDN站点和MSDN，我以为我已经弄明白了，但现在我不确定…. 我想当拖动一个元素时，你可以指定允许它发生的事情（即它可以移动，复制，链接到 – effectAllowed常量之一）。这是effectAllowed属性。不同的放置目标会做不同的事情，所以当你开辟另一个元素时，它可以控制在drop上发生的“效果”，这就是“dropEffect”属性。所以我设置了一个简单的例子来测试这个理论。的jsfiddle $(“[draggable=’true’]”).on(“dragstart”, function(e) { var dt = e.originalEvent.dataTransfer; dt.effectAllowed = “copyMove”; dt.setData(“text/plain”, “Foo”); }); $(“#dropZoneCopy”).on(“dragover”, function(e) { var dt = e.originalEvent.dataTransfer; dt.dropEffect = “copy”; e.preventDefault(); }); $(“#dropZoneMove”).on(“dragover”, function(e) { var dt = e.originalEvent.dataTransfer; dt.dropEffect = “move”; e.preventDefault(); }); 我有一个用户可以拖动的框 – 允许的效果是“copyMove”。我有一个框设置dropEffect复制，一旦设置dropEffect移动。我期望的是，当用户拖过“复制框”时，光标将改变以指示将发生复制，因为我在“移动框”上拖动光标变化以指示移动… 只有Chrome的行为符合我的预期。这是因为其他浏览器是错误的还是因为我不了解规范。好吗？更新来自摆弄这个的更多信息。 […]

Gridster的替代品？: 我已经将Gridster库用于使用拖放多列网格的项目。遗憾的是，Gridster仅支持Internet Explorer 9+。我需要找到一个类似的简单易用的库，它允许我使用IE8做同样的事情，如果它也可以兼容IE7和IE6。那么，旧的IE是否有类似Gridster的库？我在这个项目中使用jquery，所以一个基于jquery的库也可能很棒。 PS我发现了一个名为AnimaDrag的东西，但它不如Gridster好，而且有点糟糕。

jQuery HTML5文件拖放: 我已经看了很多脚本，用于通过拖放式AJAX将图像上传到服务器。我找到的脚本不是jQuery，非常大，并没有完全按照我的意愿行事。将来它应该使用jQuery，AJAX和PHP上传图像。我的问题在许多示例中，我查看了e.dataTransfer.files的工作。在我的情况下，它没有。我需要以某种方式绑定它吗？我想尽可能多地使用jQuery。的jsfiddle 尽情玩耍…… http://jsfiddle.net/AMjEz/ 码 #dropzone { border: 2px dashed #ccc; width: 300px; height: 200px; } jQuery(document).ready(function($) { $(‘#dropzone’).on({ dragenter: function(e) { $(this).css(‘background-color’, ‘lightBlue’); }, dragleave: function(e) { $(this).css(‘background-color’, ‘white’); }, drop: function(e) { e.stopPropagation(); e.preventDefault(); console.log(e.dataTransfer.files); } }); }); Drop files here

拖放文件上传: 所以我正在努力寻找我正在寻找的东西以及如何实现它。我有一个基本的PHP文件上传工作，用户按下自定义上传按钮，选择一个文件，然后使用JS，它检查更改（即用户选择文件），然后提交上传图像的表单精细。我现在想要的是拖放上传区域。因此，用户可以从文件浏览器中拖动图像并将其放在指定位置（而不是整个页面），然后删除该图像后，表单将自动与其图像一起提交并使用相同的PHP处理。这可能和现实吗？

jQuery拖放多个元素: 我目前正在使用jquery和php开发一个Web文件浏览器。我的一个子任务是能够选择几个文件/文件夹并将它们放到另一个文件夹中。根据我的研究，我发现jquery ui具有可拖动和可放置的function，可以在80％的情况下完成工作。应该怎么做才能选择几个元素并丢弃它们？可以使用jquery ui中现有的可拖动/可插入插件吗？如果没有，你能推荐任何可以做这项工作的jquery插件吗？

JQuery Draggable + Sortable：如何判断项目是否实际添加到我的可排序列表中？: 好吧，我可能在这里遗漏了一些明显的东西，但是我的搜索结果没有任何帮助。我已经设置了一个可排序的列表并连接了一个可拖动的“调色板列表”，如下所述： http ： //jqueryui.com/demos/draggable/#sortable 我可以从我的可拖动列表中拖动项目并将其放在我的可排序列表中。这很好。我需要在其中一个项目被放到可排序的时候触发一个函数。我已经尝试了可拖动项目上的“停止”挂钩，但无论项目被丢弃在哪里都会触发（例如，如果还原则会触发：触发“无效”）。我无法在任何地方找到任何属性来告诉我拖动是否成功。我已经尝试将sortable视为“droppable”并绑定到“drop”，但这甚至都没有被调用。谢谢您的帮助！

如何在可嵌套列表中移动相同深度的列表项: 我使用https://github.com/RamonSmit/Nestable在有序列表中拖动下拉列表项。我从以下网站获取了js和css： – https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.css https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.js 以下是我创建的有序列表： – Item 1 Item 2 Item 3 Item 4 Item 5 $（’。dd’）。nestable（{maxDepth：2}）; 我只需要两个级别的深度。在第一级深度我会有父母，在第二级深度我需要标题。现在我需要将n drop title从一个章节拖到另一个章节，但我需要阻止章节在另一章中拖动。因此，我可以在拖放后将标题保留为标题和章节。我尝试了许多针对n-trial试验以及可嵌套的方法，但无法弄明白。如果有人可以帮助我。

Dropzone js – 从同一页面拖动n Drop文件: 我正在使用Dropzone插件来拖放多个文件拖放function。当我从笔记本电脑/台式机上传图片时，拖放工作正常。我的问题是 – 如何将n drop图像从同一页面拖放到dropzone中。让我们说我有一个dropzone div，我有另一个有多个图像的div。我想将这些图像拖放到dropzone中。

带有上传附件选项HTML / JQuery的文本区域: 我创建了文本区域，允许用户输入文本，如下所示： Please type your favourite foods here and upload attachments if you want! 我想允许用户允许能够拖放文件附件或将文件附件上传到文本区域，但我不确定如何实现这一点。我对Web开发很陌生，我不确定甚至会调用这样的function。我已经创建了一个我想要的截图，请参阅下面的内容 – 这与gmail撰写窗口有关。请有人帮帮我，谢谢。一旦用户编写并上传了文件，我将把它们保存到数据库中。

将Draggable连接到Sortable会导致helper元素跳转: 我有一个jQueryUI可拖动对象和页面上的可排序对象。将元素从可拖动元素拖动到可排序元素会导致拖动的元素跳到页面的左上角。这是演示： http ： //jsfiddle.net/travisrussi/aBhDu/1/ 重现：将“项目5”从可拖动的div（顶部框）拖到可排序的div（底部框）实际结果：拖动到可排序项目时，项目5跳转到左上角 – http://sofzh.miximages.com/jquery/474OP.jpg 看似拖动的元素从相对位置切换到绝对位置。被拖动的’li’切换自： Item 3 对此： Item 3 当可拖动项目被拖入可排序对象时。这是jQueryUI 1.8.12的相关代码片段（从第3041行开始）： //The element’s absolute position on the page minus margins this.offset = this.currentItem.offset(); this.offset = { top: this.offset.top – this.margins.top, left: this.offset.left – this.margins.left }; // Only after we got the […]