Tag: droppable

删除拖动的元素并使用jQuery重置光标

我使用jQuery拖放时遇到问题。 这是一个非常简单的小提琴,显示了我的意思( http://jsfiddle.net/Znt44/1/ ): $(‘#drop’).droppable({ drop: function (e, ui) { ui.draggable.remove(); } }); $(‘#drag’).draggable({ cursor: ‘move’ }); 如您所见,我在拖动时将光标设置为十字准线,这有效。 如果您将绿色框放在红色框上,光标将不会重置。 看起来光标也附加到红色框,并且不会重置。 如果您将绿色框放在其他位置,光标将完全重置。 重置光标的正确方法是什么? 或删除有什么问题?

如何在drop事件jquery上获取被删除项的id

当我把东西丢给jquery droppable时,我想得到丢弃的项目的id。 当我这样做时: $(“#here”).droppable({ tolerance: ‘fit’, accept: “.one”, drop: function(){ id = $(this).attr(“id”); alert (id); } }); 它当然在here提醒了droppable的id。 如何选择丢弃的div的id?

Draggables Jquery UI,在droppable上禁用单个div

我正在尝试建立一些教育网站,我希望学生们做的其中一件事就是将项目拖到某个区域,然后才能进入下一个阶段。 我是这样做的方法是使用jquery droppables脚本,并在droppable div中删除项目draggable选项禁用。 然后我将向变量添加1,当它到达正确的数字时,将启用前进按钮。 问题是我无法弄清楚如何使droppable函数仅适用于每个特定的draggable。 所以我拥有的是: $(document).ready(function() { $(“#draggable”).draggable(); $(“#draggable2”).draggable(); $(“#droppable”).droppable({ drop: function() { $( “#draggable” ).draggable( “option”, “disabled”, true );; } }); }); 有了这些div; Drop here Drag me Drag me 但是,当然,所有这一切都是禁用第一个可拖动的,只要有任何被拖入droppable div。 我的javascript不是很好(即时学习),我不知道如何让它只禁用我放入droppable区域的那个。 有人可以帮忙吗?

如何使jQuery draggable实际上捕捉到同样大小的dropable

我使用jquery-ui正确设置了draggable和droppable。 它们都是相同的大小,因此可拖动的应该适合放置在droppable上。 有没有办法让可拖动的按扣进入可放置的中间,以便完全覆盖它? 似乎我使用snap:参数它只是捕捉到边缘,而不一定是在droppable的中间。

jQuery可以使用droppable进行排序

我的小提琴: http : //jsfiddle.net/Yc9WY/42/ 你在这里看到的是两组,每组有3个可放置的容器。 您可以将事件从组1移动到组2,并移动到任何插槽中。 这很好用。 一旦一个组已满,我想让用户能够通过上下移动事件来对该组进行排序。 如果他们选择,他们仍然可以将事件移出组。 您将看到我注释掉的代码,我开始集成可排序的库,但我的行为很奇怪。 注意:我无法单独替换我的draggable / dropable。 我需要明确定义可放置区域(每组3个),以便事件可以存在于组1的插槽1和3中。 这是我的代码 $(document).ready(function() { // $(“.sort”).sortable({ // revert: true // }); $(“.drag”).draggable({ //connectToSortable: “.sort”, revert: true //helper: clone }); $(“.sort”).droppable({ drop: function(event, ui) { if (!($(this).children(“.drag”).size() == 1)) { $(this).append(ui.draggable); ui.draggable.css({ left: 0, top: 0 }); } } }); }); Group 1: […]

jQuery UI,Draggable,Droppable,Auto Scroll

我有一组可放置的li元素,它们接受一个可拖动的图标。 项目列表位于可滚动的div元素中。 我在这里放了一个简单的例子: http : //www.nerdydork.com/demos/dragscroll/ 我想知道在拖动可拖动元素时是否有一种方法可以自动滚动元素列表。 例如,假设您处于中间位置,例如http://www.nerdydork.com/demos/dragscroll/#j 。 当你接近div的顶部时,它将开始向上滚动,当你接近div的底部时,它将开始向下滚动。 任何人都知道如何使用jQuery实现这一目标? UPDATE 我越走越近了。 我在容器div的上部和下部创建了固定div。 将鼠标hover在其上时,使用http://plugins.jquery.com/project/aautoscroll启动自动滚动 现在的问题是,当我将鼠标hover在下方区域时,它会使我在字母上的拖拽变得混乱。 但这似乎只是较低的自动滚动区域的问题。 要查看我正在谈论的错误,请观看以下简短video: http : //screencast.com/t/JBFWzhPzGfz 请注意,当它自动向下滚动时,hover不会超过正确的字母。 在video结束时,你可以看到,如果你将鼠标hover在列表的左边缘,那么它会以某种方式重置并且似乎再次起作用。

jQuery droppables – 在drop上更改元素

我对jQuery有点新鲜,希望有人可以帮助我。 我想在删除(li)之后将元素(li)更改为另一个元素(div)。 示例代码: $(“#inputEl>li”).draggable({ revert: true, opacity: 0.4, helper: “clone” }); $(“#dropEl”) .droppable({ accept: “.drag”, hoverClass: “dropElhover”, drop: function(ev, ui) { // change the li element to div here } }); 问题是,当我使用时 drop: function(ev, ui) { $(ui.draggable).replaceWith(“Some content”); } 触发上述function时,将禁用原始可拖动元素。 我正在使用最新的jQuery和jQuery UI稳定版本。

在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

只将元素放入前面的droppable中

我有一些可以拖放的区域,也可以拖动。 可能会发生两个或更多可投影区域相互排斥的情况。 有没有办法将可拖动项目放入前面的区域? (Z-索引) 现在的情况是,该项目被添加到重叠的所有区域。 谢谢

当达到可放置限制时,jQuery UI draggable / sortable / droppable禁用drop

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