jquery-ui-draggable

Is this possible: Create a draggable element so that when it is dragged over a specific droppable element, the draggable element's containment option is set to the droppable element? This would create an effect where dragging something over a droppable element causes the draggable element to get locked/stuck to the confines of the droppable element. Below is an excerpt from my code, although it fails to accomplish the above effect. var droppable_position = $('#droppable').position(); $('#draggable').draggable({ helper: 'clone', drag: function (event, ui) { if (ui.position.left > droppable

I'm using jquery drag and drop. The draggable element is a div with two nested divs floated left and right. On drop, the left nested div (which contains the text), gets enabled for a click event: $('.element_left').click(function(e) { window.open(ui.draggable.attr('data-link')); }); Now on drop, sporadically, the click event fires off opening the link in the data-link for the draggable. It looks like it fires off when the draggable number doesn't match the slot number, but not 100% on this. See fiddle at http://jsfiddle.net/f2bbt/ Weird... You may need to try a few times to get this happening,

I am using Jquery UI Draggable. I'm trying to avoid items from be dropped once that the div which will receive that items reach a limit. As you can see below, here is my code. $( "#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 Fiddle example: http://jsfiddle.net/r1Lnxby9/ Edit, Updated Try removing ondragstart="drag(event)" , draggable="true" from html , drag not appear defined at js ; setting tolerance:"touch" at .droppable() options ;

I have two connected sortables, dragging between these works fine. I needed to drag more than one at a time, so I got that working using the following like, appending selected items to event.item. $(this).sortable({ connectWith: ".stage-content", placeholder: 'placeholder', start: function(ui, e) { e.item.siblings(".selected").appendTo(e.item); .... The problem I can't figure out, when not hovering over one of the two drop zones, the placeholder ends up within the elements I am dragging. If you let go at this time, they disappear. HierarchyRequestError: Node cannot be inserted at the specified

I'm researching now for over a week and yet I can't drag my JSON value to external draggable divs to a Fullcalendar from Arshaw. Thanks to some help I have my json data loaded to the external divs. All looks correct, however after appending dynamically created divs to the div with 'external-events' class my events are not draggable anymore. If I add .draggable() to my newly created divs to the divs with '.external-event' class it becomes draggable but I can't drop them correctly to my calendar. A not draggable new div with the title value will appear under a new blank draggable div. It is so

I'm sure this has been answered before but I can't find an example to fit my situation. I've got a list of images that are draggable. I've also got a div (id="dropZone") that is set to droppable and sortable. I'd like to fire a function when the images get dragged and dropped on the div, but not when things are dropped on the div from being sorted. Here's what I tried: stop: function() { $('#dropZone').prepend('<img src"img.png" />'); } This I added to the droppable images, however this will fire even when they are dropped outside the droppable. drop: function() { $('#dropZone').prepend('<img