Tag: jquery ui draggable

jQuery拖放颜色div来改变另一个的背景: 我有以下HTML ，包含4个的 – 2个门和2个颜色，你可以从他们的id猜测。我希望能够将任一颜色拖到任一门（例如左门上的蓝色和右边的黑色）并更改样式上的背景颜色。即使有人能指出我至少正确的方向，我也会感激不尽。

一旦掉落的物品数量达到一定限度，请避免掉落: 我正在使用Jquery UI Draggable。我试图避免一旦接收到该项目的div达到限制就丢弃物品。如下所示，这是我的代码。 $( “#grid-list” ).droppable({ over: function(event, ui) { count = 0; $(“#grid-list”).find(“li”).each(function () { count++; if(count > $(“#grid-list”).data(“albumlist”)){ alert(“limit reached”); } }); } }); JS小提琴示例： http ： //jsfiddle.net/r1Lnxby9/

从外部在iFrame中创建可拖动对象: 我的问题：我需要从iframe外部创建可拖动的小部件（例如，这里是一个jslider）。 Container和iframe内容都来自同一个来源。问题是jQuery将mousemove事件附加到错误的文档对象上。 http://jsfiddle.net/techunter/4pnxh 尝试移动滑块，它只能在鼠标触发iframe外的事件时移动。请帮忙，我被困在这里编辑：JQuery侦听滑块手柄上的单击并在单击事件上它在mousemove上创建一个新的侦听器，但在窗口内，而不是框架。我正在考虑更改jquery lib并添加一个上下文（默认情况下是window.document）但是它的时间很长。

JQuery Draggable + Droppable + Sortable: 我确信这已经得到了回答，但我找不到符合我情况的例子。我有一张可拖动的图像列表。我还有一个div（id =“dropZone”）设置为droppable和sortable。我想在图像被拖放到div上时触发一个函数，但是当div上的内容被排除时，我不想触发它。这是我尝试过的： stop: function() { $(‘#dropZone’).prepend(”); } 我添加到droppable图像，但是即使它们被丢弃在droppable外面也会触发。 drop: function() { $(‘#dropZone’).prepend(”); } 然后我尝试将其添加到我的droppable中，但是这会在拖动和排序时添加图像。有人知道我需要做什么吗？

动态创建的外部事件不可拖动: 我现在正在研究一个多星期，但是我不能将我的JSON值从Arshaw拖到外部可拖动的div到Fullcalendar。感谢一些帮助，我将我的json数据加载到外部div。所有看起来都是正确的，但是在使用’external-events’类将动态创建的div附加到div后，我的事件不再可拖动了。如果我将.draggable()添加到我新创建的div到具有’.external-event’类的div，它会变得可拖动但我不能正确地将它们放到我的日历中。具有标题值的不可拖动的新div将显示在新的空白可拖动div下。太烦人了。在我的index.html中： $(document).ready(function() { /* initialize the external events —————————————————————–*/ $(‘#external-events div.external-event’).each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn’t need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element’s text as the event title }; // store the Event Object […]

Jquery UI可排序多个项目几乎可以工作，但剩下的一个问题: 我有两个连接的可排序，拖动这些工作正常。我需要一次拖动多个，所以我使用以下方法工作，将所选项目附加到event.item。 $(this).sortable({ connectWith: “.stage-content”, placeholder: ‘placeholder’, start: function(ui, e) { e.item.siblings(“.selected”).appendTo(e.item); …. 我无法弄清楚的问题，当没有hover在两个放置区域中的一个上时，占位符最终会在我拖动的元素内。如果你现在放手，它们会消失。 HierarchyRequestError：无法在层次结构中的指定点插入节点这是完全合理的，但我不知道解决方案是什么，任何帮助表示赞赏！ http://jsfiddle.net/mstefanko/kxBUG/

Jquery拖放 – 在drop上单击事件寄存器: 我正在使用jquery拖放。 draggable元素是一个div，有两个嵌套的div左右浮动。在drop上，左侧嵌套div（包含文本）将为click事件启用： $(‘.element_left’).click(function(e) { window.open(ui.draggable.attr(‘data-link’)); }); 现在，在零星的情况下，偶尔点击事件将触发打开可拖动数据链接中的链接。当可拖动的号码与插槽号码不匹配时，它看起来会触发，但不是100％。请参阅http://jsfiddle.net/f2bbt/上的小提琴很奇怪……您可能需要尝试几次才能发生这种情况，将元素拖到插槽的边缘，以便插槽突出显示。 “Extract RNA”下面的拖拽似乎比其他人更多……并且当它发生时加载了错误的页面……应该是element_8.html，但它会打开element_1.html的新页面（其中属于Isolate Virus元素）。

使用jQuery UI删除目标区域后克隆可拖动: 我想让一些图像尽可能多地放在目标区域。但是图像只下降了一次。我的jQuery UI代码： $(function() { $( “.draggable img”).draggable({ revert: “invalid”, appendTo: “#droppable”, helper: “clone” }); $( “#droppable” ).droppable({ activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, drop: function( event, ui ) { $( this ).find( “.placeholder” ).remove(); var image = $(“.ui-draggable”); $( “” ).image.src.appendTo( this ); } }); }); 请看这里的演示： jsFiddle示例从示例中，您可以看到图像仅在第一次出现在div区域中。但我希望用户能够在目标区域中拖放同一图像多次。因此，例如，用户可以将图像拖放5次，并且将在目标区域中克隆 5个图像。我怎样才能做到这一点？

实现自动滚动后奇怪的可拖动行为: 我使用jQuery UI可拖动小部件实现了拖放。我现在正在拖动操作期间实现自动滚动。我进行了设置，以便在您开始拖动时，灰色叠加层会出现在浏览器窗口的顶部和底部。当您拖入其中一个叠加层时，浏览器窗口将开始自动滚动。您可以在http://www.softcircuits.com/Client/scrolltest.html上查看我的测试页面。通过拖动左侧的一个十字准线图标来拖动项目。但是有一个问题：如果您滚动到页面底部，然后将项目拖到顶部叠加层，它将按预期向上滚动。然而，对我来说，我大约在页面的一半，而可拖动的助手不会更高。我无法一直拖到页面顶部。这很可能与Draggable小部件有关。有人能够看出为什么会这样吗？我在Windows 7上使用谷歌浏览器。

如何动态添加列表元素在jquery中可拖动？: 这是我的代码来自http://jsfiddle.net/XUFUQ/1/ $(document).ready(function() { addElements(); } ); function addElements() { $(“#list1”).empty().append( “Item 1″+ “Item 2″+ “Item 3” ); } $(function() { // there’s the gallery and the trash var $gallery = $( “#list1” ), $trash = $( “#list2” ); // let the gallery items be draggable $( “li”, $gallery ).draggable({ cancel: “button”, // these elements won’t […]