Questions tagged [jquery-ui-draggable]

The jQuery UI Draggable plugin makes selected elements draggable with mouse movement.

The Draggable plugin makes the selected elements draggable with mouse movement.

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Best part is that it is very easy to use. See this example:

<script>
    $(function() {
        $( "#draggable" ).draggable();
    });
</script>

For more information visit- jQuery UI - Draggable Demos and the API Documentation


Related Tags

1817 questions
150
votes
12 answers

Draw a connecting line between two elements

How can I draw a line between two or more elements to connect them? Any combination of HTML/CSS/JavaScript/SVG/Canvas is fine. If your answer supports any of these, then do mention it: draggable elements draggable/editable connections element…
Bakhtiyor
  • 7,198
  • 15
  • 55
  • 77
80
votes
21 answers

jQuery draggable shows helper in wrong place after page scrolled

I'm using jQuery draggable and droppable for a work-planning system I'm developing. Users drag jobs to a different day or user, and then data is updated using an ajax call. Everything works fine, except when I scroll down the main page (Jobs appear…
Alex
  • 8,353
  • 9
  • 45
  • 56
57
votes
4 answers

When I make a draggable clone and drop it in a droppable I cannot drag it again

When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us .append to add the clone to the droppable. But then it snaps to the top-left corner after any existing…
Cudos
  • 5,733
  • 11
  • 50
  • 77
57
votes
1 answer

jQuery Droppable, get the element dropped

A small question hopefully with a simple answer, I am using jQuery draggable and droppable to place items into a dock. Using the below code for the drop. $("#dock").droppable({ drop: function(event, ui) { //Do something…
Pez Cuckow
  • 14,048
  • 16
  • 80
  • 130
48
votes
4 answers

grouping draggable objects with jquery-ui draggable

I want to use jquery draggable/droppable to let the user select a group of objects (each one has a checkbox in the corner) and then drag all the selected objects as a group... I can't figure out for the life of me how to do it haha. Here is what I'm…
Jiaaro
  • 74,485
  • 42
  • 169
  • 190
46
votes
4 answers

How to get jQueryUI drag\drop working with touch devices

This is one situation where I hope someone replies to tell me I'm an idiot. But I continue to be amazed that jQueryUI drag\drop doesn't work with touch devices. I have not tested them all but I have tried iphone\ipad\android 2, 3&4 over the last…
Brian
  • 839
  • 1
  • 10
  • 14
42
votes
6 answers

Accurate drop for draggable element on scaled div

THE PROBLEM I'm having a minor problem dragging elements onto a scalable div container. Once the element is actually in the container, the elements drag fine and work the way they are supposed to. Larger elements that are dragged onto the scalable…
bryan
  • 8,879
  • 18
  • 83
  • 166
42
votes
3 answers

How to exclude an element from being dragged in sortable list?

How can I exclude an element from sortable list? For instance, there is an element with class name 'note' that I don't want to be draggable?
  • Item 3
  • Item 4
Run
  • 54,938
  • 169
  • 450
  • 748
39
votes
7 answers

jQuery drag and drop - checking for a drop outside a droppable

My apologies if this was answered in another question, I could not find an answer specific to my problem! I'm trying to test whether a jQuery draggable is being dropped outside of a legal droppable. This would normally be solved 90% of the time by…
35
votes
3 answers

How do I highlight a droppable area on hover using jquery ui draggable

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an…
35
votes
4 answers

How can I detect a rightmouse button event on mousedown?

I am updating/debugging and expanding the capabilities of my draggable script and I need to be able to achieve the following result: whatever.onRightMouseButtonMousedown = preventDefault(); I have done a lot of research to no avail, however, I know…
person0
  • 1,278
  • 2
  • 15
  • 20
33
votes
2 answers

JQuery UI : Drop long element at the cursor location instead of the middle of the element

I have some very long draggable elements that I can drop in all cells of a background table. When I start dragging this kind of element hover my droppable containers (the cells of my table), the "hot" point to know where the element will be dropped…
sdespont
  • 13,915
  • 9
  • 56
  • 97
32
votes
2 answers

jQuery UI Draggable not working on ios devices

I am using .draggable (part of jQuery UI) to allow users to move items around as part of a simple web app. It works fine on all the latest desktop browsers for OSX & Windows (except Windows Safari, where it only moves the items vertically for some…
sam
  • 9,486
  • 36
  • 109
  • 160
32
votes
5 answers

how to revert position of a jquery UI draggable based on condition

I have an element which is draggable and an element which is droppable. Once the dragged item is dropped on the dropzone I am trying to execute the following jquery psuedo code: if(draggedelement ==…
Mazatec
  • 11,481
  • 23
  • 72
  • 108
29
votes
2 answers

jQuery draggable and droppable between two containers and sortable

Im trying to develop a small page that has the following functionality: Page will have two divs: one being #origin, containing a lot of thumbnail images, and the second one will be #drop, where the images can be dropped on (up to 3 only). it needs…
GR7
  • 5,083
  • 8
  • 48
  • 66
1
2 3
99 100