jquery-ui-draggable

I have a set of elements that are draggable. How can I remove draggable function? $('.draggable').draggable('disable') is not an option in my case $('.draggable').draggable('destroy') returns Uncaught TypeError: Cannot read property 'options' of undefined From the jQuery UI API: destroy() Removes the draggable functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. Code examples: Invoke the destroy method: $( ".selector" ).draggable( "destroy" ); EDIT As this seems to not work properly for you - and it's an issue being seen

I am using JQuery UI to implement resizable/draggable elements. Now I would like to define a containment for these elements that limits the resizing/dragging on exactly three(!) sides. E.g. have a look at this JSFiddle example . You can see that the contained element can only be resized/dragged inside the parent's area. What I would like to achieve is that the element can exceed the bottom threshold and be moved to beyond the bottom border of the parent. Nevertheless the resizing/dragging should still be limited at the top, right and left sides as is prescribed by the parent's according

I am trying to use jQuery sortable, droppable and draggable to work together. I have 3 lists: a break-point placeholder; report rows; report groups. The user should be able to: Drag as many placeholder copies into the 'report rows' list Drag one-at-a-time a single 'report group' (not a clone) into the 'report rows' collection (but not vice-verse)...until no more report groups are left. The user should be able to sort the report rows list ad nauseum. My problem is... I cannot get Number 2 above to work Side Note: I really did try to create a jsFiddle for this but couldn't get jsFiddle to

I don't normally make this sort of question / answer, but figured I'd do so, since I've seen this question asked 20+ times, and not a single answer actually works. In short, the problem is that if you have scrollable content ( overflow: auto; anywhere inside of a draggable jQuery item, when you click and drag the scrollbar's the parent draggable container drags along with it. So, I spent some time working up a solution. Here's an example of some html that would present this problem: <div class="draggable" style="width:100px;height:100px;"> <div id="content" style="width:80px;height:80px

I have a Draggable/Sortable set of lists that I am dynamically adding items to, but the trouble is, that once an item has been added, it's not possible to move them to the new lists. You can see the functionality here: http://jsfiddle.net/Y4T32/2/ Drag an item from the available list to one of the target lists, and you'll see that I mean. Now add a "callout" and try to drag the new item to one of the target columns. I found another answer on here that works as I want, but have been unable to reproduce the results they got (and of course, can't find the answer now). Any insight into what I am

Preface I'm experiencing a problem where the draggable helper is being offset incorrectly, when using draggables + sortables that are placed in floating, relative positioned parent elements. The floated parent elements are Bootstrap columns, where multiple sortable lists are placed in one column, and a list of draggables is placed in another. Example Here's a working example snippet $('.sortable').sortable({ connectWith: '.sortable', revert: 600, forcePlaceholderSize: true, placeholder: 'ui-sortable-placeholder', tolerance: 'pointer' }).disableSelection(); $('.draggable').draggable({