Tag: draggable

滚动可拖动项目的内容时禁用jQuery拖动: 我通常不会提出这样的问题/答案，但我想我会这样做，因为我已经看过这个问题20多次了，而且没有一个答案确实有效。简而言之，问题是如果你有可滚动内容（ overflow: auto;在可拖动的jQuery项目内的任何地方，当你点击并拖动滚动条时，父可拖动容器随之拖动。所以，我花了一些时间来处理解。这是一个会出现此问题的html示例： Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. 初始化元素可拖动的典型方法是这样的： $(“.draggable”).draggable()

基于IFrame的JQuery可拖动和可resize（解决方案）: 我最近遇到了一些使用JQuery Draggable和Resizable插件的麻烦。寻找解决方案，我在许多不同的地方发现了一些非常零散的代码，最后归结为一个干净的解决方案，这似乎对我来说几乎是完美的。如果他们也遇到这个问题，我想我会和别人分享我的发现。我有一个包含和IFrame的div。这个div必须是可resize和可拖动的。足够简单 – 将jquery draggable和resizable添加到div中，如下所示： $(“#Div”).draggable(); $(“#Div”).resizable(); 一切都很好，直到您拖动包含iframe的另一个div或尝试通过移动当前的iframe来调整当前div的大小。通过iframe时，这两个函数都会停止。解： $(“#Div”).draggable({ start: function () { $(“.AllContainerDivs”).each(function (index, element) { var d = $(”); $(element).append(d);}); }, stop: function () { $(‘.iframeCover’).remove(); } }); $(“#Div”).resizable({ start: function () { $(“.AllContainerDivs”).each(function (index, element) { var d = $(”); $(element).append(d); }); }, stop: function […]

用另一个元素开始拖动: 是否可以用另一个元素开始拖动？例如： http ： //jsbin.com/igohod/edit#preview 我想点击#ct时开始拖动#icon 。值得注意的是， #icon并非来自DOM树中的#ct 。 HTML Icon start this drag when you drag the icon JS $(document).ready(function() { // $(‘#icon’).draggable(); $(‘#ct’).draggable(); }); 更新：可排序的新示例 http://jsbin.com/igohod/8/edit#preview 解 http://jsbin.com/igohod/13/edit#preview

可信的div中的HTML5可拖动元素 – 在第一次掉落后停止工作 – 为什么？: 我正在尝试创建一些可拖动的元素（标记），可以在一个可信的div中拖动。似乎一切都在工作，除了……在我拖动一个元素然后放下它之后，我再也无法拖动它了。似乎我再也无法绑定它的dragstart事件了。知道为什么会这样，我该如何解决？这是我小提琴的链接： http ： //jsfiddle.net/gXScu/1/ HTML： Testime siinkohal seda, et kuidas on võimalik asja testida. Token Token 2 Javascript（jQuery） var bindDraggables = function() { console.log(‘binding draggables’, $(‘.draggable’).length); $(‘.draggable’).off(‘dragstart’).on(‘dragstart’, function(e) { if (!e.target.id) e.target.id = (new Date()).getTime(); e.originalEvent.dataTransfer.setData(‘text/html’, e.target.outerHTML); console.log(‘started dragging’); $(e.target).addClass(‘dragged’); }).on(‘click’, function() { console.log(‘there was a click’); }); } $(‘#editor’).on(‘dragover’, function […]

jQuery：draggable connect to sortable。 draggable项具有与可排序列表不同的DOM: 我现在能够将项目拖动到可排序的项目。但是可排序列表具有不同的DOM。 DRAG THIS A DRAG THIS B This is a new DOM dragged from “DRAG THIS A” This is a new DOM dragged from “DRAG THIS B” $(document).ready(function() { $(‘.draggable_text > li’).draggable({ //helper:’clone’, helper: function(event, ui) { return ‘xxx’; }, connectToSortable:’#stagerows’ }); $(‘#stagerows’).sortable({ handle: ‘.drag_handle’ }); }); 助手有这个：xxx这应该放入可排序的…… “助手”有效。但是当我将项目“删除”到可排序项中时，它只会恢复为“原始”DOM。我希望将“新创建的DOM”（在帮助程序中创建的DOM）放入可排序的中。我希望我有意义。谢谢！另一种说法是：当我拖动一个苹果时，它现在变成了橙色。 […]

如何在jQuery中创建一个可拖动的元素？: 如何使用jQuery创建一个元素，例如div，draggable？

将对象拖到可排序列表中 – AngularJS: 问题：我正在尝试从jQuery重新创建Draggable + Sortablefunction，并且无法将被删除的元素放入我的对象数组中。我想将$ .draggable（）按钮拖到$ .sortable（）列表中。我希望按钮代表具有属性的对象（可以是关联数组，或对象本身），当我将其放入列表中时我希望它将自己放入数组中的位置。需要明确的是：我在左侧的菜单中有一系列潜在的对象。在右边，我使用$ http来调用我的API来检索一个包含所有字段都在$ scope中的表单。我希望将该潜在对象（如textarea）放入该表单的删除位置的字段中。 jquery位很简单，但是$ scope数组中不存在的对象是问题所在。我尝试过的：我很接近混合使用ui-sortable和$ .draggable指令包装器，但是我的代码运行得不好。例子： KnockoutJS示例： http ： //bit.ly/15yrf8X jQuery演示： http ： //jqueryui.com/draggable/#sortable 更新1：我已经取得了进展，使用ui-sortable like指令结合包装$ .draggable（）的指令，有点难看但有效。更新2：我现在有它工作，但我从jquery获取索引并使用php将其切片到该位置，然后重新加载整个列表。谈论跛脚必须有更好的方法。更新3：这是一个模块化的工作示例，适用于任何人的应用程序。 http://clouddueling.github.io/angular-common

在jQuery中，如何在ajax调用失败时恢复可拖动？: 如果ajax调用on drop返回失败，我希望draggable恢复到其原始位置。以下是我想象的代码..如果ajax调用正在进行中，拖动器可以放置在droppable中，这是可以的… jQuery(document).ready($){ $(“#dragMe”).draggable(); $(“#dropHere”).droppable({ drop: function(){ // make ajax call here. check if it returns success. // make draggable to return to its old position on failure. } }); } DragMe DropHere

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

当达到可放置限制时，jQuery UI draggable / sortable / droppable禁用drop: JS Bin演示任务：我正在使用jQuery UI创建一个事件调度程序。事件具有一定的长度（以分钟为单位），并且可以拖动到不同的日期，每个日期都有自己的最大长度（以分钟为单位）。在该示例中，每天的最大长度为480分钟，并且应该允许不超过480分钟的“事件”。问题：如果“事件”将导致“日期”超过其最大时间长度（基于已经丢弃的元素的组合时间），则应禁用该“日期”（此特定事件不允许丢弃）。从演示中可以看出，我可以计算出每天事件的合并时间（“可用分钟数”在拖动停止时更新），但我不知道如果拖动事件，如何禁用掉入当天会导致“可用时间”变为负数。