draggable

pin/unpin draggable div in scriptaculous

I'm using a draggable effect on a css div for a shopping cart (prototype+script.aculo.us). I want to insert a link into this div which allows the users to toggle between fixed and absolute positioning. Does script.aculo.us has any simple way of doing it? (So far i found nothing) ...

JQuery preserve draggability when element is removed.

I'm trying to move a draggable element around in the DOM, but whenever I try replaceWith() or remove() or similar functions, its draggability is lost. Is it possible to make an element not lose its draggability when moving it around in the DOM? ...

jquery droppable problem

Hi all, i have a problem in jquery drag n drop. I have a "div a" and 'div c' i.e draggable n a 'div b' over which 'div a' and 'div c' are droppable.if div a is dropped over div c .How can i find that as div b is the superset of div c. ...

jquery - Resize element ondrag when reaches container.

I have a standard div that is set to both drag & resize within it's parent. I need to be able to resize the div as it is dragged into it's parent. I only need this to happen when it's dragged vertically to the bottom, so I have it setup like this: $("#draggable").draggable({ drag: function(event, ui) { AtBottom(); }, axis:'y', c...

WPF - Creating simple controls to be used on a Canvas

I'm developing a simple WPF UI for image post-processing. I'd like to create a draggable WPF control to be used on a Canvas which would look roughly like this: Both end points ellipses would be draggable and the line joining them would follow as the end points move. Now, I know how to implement this by simply adding these elements i...

jQuery Drag from a List (without removing element) and Drop into another List

How can I have two lists (div or table elements) in which I can drag & drop items from one to the other (I think jQuery droppable does this), but without actually removing it from the source list? Example: List1 List2 AAA 111 BBB 555 CCC 999 DDD 777 Now I'm dragging BBB from the left to the right between "55...

How can i inject an object inside a context of a draggable element in JQuery ?

Hi, I use draggable/droppable JQuery feature as follows div.container { height:400px; } <div class="container" id="source"> <div id="0">Item 0</div> <div id="1">Item 1</div> <div id="2">Item 2</div> </div> <div class="container" id="target"></div> $("#source div").draggable({ helper:"clone", revert:"inval...

exlude item from handle on jquery draggable

i have a draggable div that has the overflow position to auto, so when the content is too big and i get a scroll bar, since i haven't added a handle (i want the hole content of the div to drag it) when you use de scroll bar the div moves/draggs.... is there a way of excluding an element from the handle of a draggable div in jquery? i...

jQuery droppable out event fails to trigger?

$(".LWdrop").droppable({ accept: ".LW", drop: function(event, ui){ ui.draggable.addClass("LWactive"); $(this).droppable('option', 'accept',''); $(this).css("background-color", "#444444"); }, out: function(event, ui){ $(this).droppable('option', 'accept', '.LW'); u...

Stop drag of google map outside visual bounds

When you are pretty far zoomed out on a google map, you can drag it enough so that the map ends and becomes a blank gray color. The map seems to repeat seemlessly on the horizontal axis, but not vertically.I'm wondering if there is a way to prevent the map from being dragged when it reaches that gray area. Any ideas? ...

jQuery How do you scroll the droppable / sortable element from a draggable?

I have a simple setup, a div with a list of items and a second div to add those items to. The second div is sortable, and css is set to overflow: scroll. When arranging the items in the sortable div, it scrolls as expected. When adding a new item to the sortable, it does not scroll. I want the same scrolling behavior, no matter where...

Drag+Drop with physical behaviour

I'd like to implement a dragging feature where users can drag objects around the workspace. That of course is the easy bit. The hard bit is to try and make it a physically correct drag which incorporates rotation due to torque moments (imagine dragging a book around on a table using only one finger, how does it rotate as you drag?). Doe...

jQuery draggable clone with y axis restriction

If I have this markup: <table id="sometable"> <tr> <td class="x"><span>111</span></td> <td>aaa</td> </tr> <tr> <td class="x"><span>222</span></td> <td>bbb</td> </tr> </table> And this jQuery code: $(".x span").draggable({ helper: 'clone', axis: 'y'}); When dragging the first column the cloned span is...

Setting boundary limits for a draggable object...

I have two elements: 1) a parent of fixed height, overflow:hidden 2) its child, of larger fixed height. <style type="text/css"> .myList {list-style:none; margin:0px; padding:1px;} .myList li{ height:50px; margin:4px; padding:2px;} .dragPanel {height:230px; border:solid; overflow:hidden;} </style> <div class="dragPanel">...

How to make jQuery draggable with fixed X and Y axis?

Hello everyone! I am wondering if there is a way to make the jQuery draggable to only drag straight up, down and left, right. I want to prevent the user from dragging a div diagonally. Using the grid option in the draggable UI is not possible in my situation. http://jqueryui.com/demos/draggable/#constrain-movement How is this possible...

mootools sortables vs jquery sortables effect

Hello, I've been using mootools for some time and trying jQuery for a week so this probably is a newbie question - though I've found nothing in the manuals. In mootools, when you use the option clone in a sortables list it creates a clone of your image/object that helps you visualize where the image/object will be droppped - works gre...

Drag a zoomed image within a div clipping mask using jQuery draggable?

I'm creating an interface to allow a user to zoom in on an image and drag the zoomed version around within a clipping mask div. I have a div 200px by 200px that I set overflow: hidden on. Then I load a std img (<img src="etc">) into the div that is, say, 1000px by 1000px. Then I use jQuery $("#my-image").draggable({ containment: [-8...

jQuery iframeFix on a Sortable

Hello! On my CMS I have a list of thumbnails (Sortable). The thumbnails work great and now I'm writing a plug-in to drag-them to a tinyMCE window. As the tinyMCE window has an iFrame it doesn't work that well. jQuery has an option for Draggables called iframeFix that works exactly as I need. However that list must be a Sortables. I'v...

jQuery draggable text selection bug

I am not sure if this is a bug - but in this example there is no way to select the text underneath the elements that can be dragged. Same issue with form elements. http://jqueryui.com/demos/draggable/handle.html Any ideas? ...

jquery ui drag/drop getting position from multiple draggables

I have a droppable container with >1 draggables in it. I want to simply be able to see the position of each draggable every time any one of them is dragged. Sounds easy, but I'm having a tough time figuring it out. Here's what I have: <script type="text/javascript"> $(function() { $("#draggable").draggable({ containment: '#droppable' }...