AFAIK, if iframes come from different domains, this is not doable in a “common” way (unless you control both iframes), browser security measures prevent it, otherwise you could wrap a banking website and steal passwords, for example, when you log in. Some info on workarounds: http://softwareas.com/cross-domain-communication-with-iframes If you control both iframes: Drag & Drop between … Read more
jQueryUI does keep an internal “state” of “snapped” elements, but you have to work a little to get at it. You’re going to want to define an event handler for the stop event (which is called when a draggable object is stopped dragging). An array called snapElements is maintained inside the widget data, and it … Read more
You need to use cancel. See working example here. Js: $(function() { $(‘.sortable’).sortable(); $(‘.sortable’).disableSelection(); $(‘.sortable’).sortable({ cancel: ‘.note’ }); }); As @Zephyr points out, this let’s you re-arrange the position by dragging the siblings, if you want to avoid that, use owise1 approach: $(‘.sortable’).sortable({ items : ‘:not(.note)’ });
Your thinking was correct, you have to make the small boxes greedy droppables and handle the drop event on them. The tricky part is to cancel the drag operation. By default, your draggables should start as revert:’invalid’. You don’t have to do anything if they are dragged inside the big box, which in my example … Read more
Looks like it’s because you’re doing it on an <img>, which jqueryui wraps in a <div>, and then the draggable component of the image happens within the wrapping <div>. Try wrapping the <img> in a <div> (which if styled display:inline-block, will “hug” the size of the image in both x and y axes), make the … Read more
Edit: New Solution I found a plugin for this called JQuery UI Draggable Collision. Using this, implementing your desired functionality becomes trivial. See the following jsFiddle example: http://jsfiddle.net/q3x8w03y/1/ (This uses version 1.0.2 of JQuery UI Draggable Collision, along with JQuery 1.7.2 and JQueryUI 1.1.18.) Here is the code: $(“#dragMe”).draggable({ obstacle: “#butNotHere”, preventCollision: true, containment: “#moveInHere” … Read more
One way to do it is: $(document).ready(function() { $(“#container”).droppable({ accept: ‘.product’, drop: function(event, ui) { $(this).append($(“ui.draggable”).clone()); $(“#container .product”).addClass(“item”); $(“.item”).removeClass(“ui-draggable product”); $(“.item”).draggable({ containment: ‘parent’, grid: [150,150] }); } }); $(“.product”).draggable({ helper: ‘clone’ }); }); But I’m not sure if it is nice and clean coding.
You could use the draggable’s helper option to drag groups of items. For example, if your draggables have checkboxes, you can return the selected items from the helper function like so: $(‘#dragSource li’).draggable({ helper: function(){ var selected = $(‘#dragSource input:checked’).parents(‘li’); if (selected.length === 0) { selected = $(this); } var container = $(‘<div/>’).attr(‘id’, ‘draggingContainer’); container.append(selected.clone()); … Read more
it is because it simulating drag event only without drop, use drag-n-drop instead. draggable.simulate(“drag-n-drop”, {dx: dx, dy: dy});
This might be a related bug report, it’s been around for quite a while: http://bugs.jqueryui.com/ticket/3740 It seems to happen on every browser I tested (Chrome, FF4, IE9). There are a few ways you can work around this issue: 1. Use position:absolute; in your css. Absolutely positioned elements don’t seem to be affected. 2. Make sure … Read more