Stack Overflow
Stack Overflow

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
0
votes
2 answers

jQuery droppable / draggable

At the moment I have a set of divs, generated dynamically by php and all having their ids starting with 'itembox', with a count number appended. I have a droppable garbage bin area on the page so that the user can delete an individual itembox by…
Tim Sewell
  • 58
  • 1
  • 6
0
votes
1 answer

sortable divs created on the fly with jquery ui

I'm trying to enable sortable feature on div's that are being created on the fly. I could not reproduce the example from jquery UI. Am I missing something? Here's the JS Fiddle:
…
Thiago Custodio
  • 17,332
  • 6
  • 45
  • 90
0
votes
1 answer

Bootstrap Dialog with jQuery-UI draggable drags the modal area around too

When I open a Bootstrap Dialog and drags it around by using jQuery's draggable function, I drag the modal-area around too. The problem is if I drag the Dialog down and right 100px, the top and left side of the website isn't modal anymore. How can I…
radbyx
  • 9,352
  • 21
  • 84
  • 127
0
votes
1 answer

Filter drop areas in jQuery drag and drop

I have a list of draggable elements (.item) and drop areas (.droparea).
Drop area 0
Item 1
Drop area…
Giorgio
  • 1,940
  • 5
  • 39
  • 64
0
votes
3 answers

Jquery table row index after move

I created a question yesterday to help me find the new index of a or a
  • once it has been moved using Jquery UI drag & drop functionality, and this works perfectly :) Something I did not think about however and have been trying to figure…
    • Fizor
    • 1,480
    • 1
    • 16
    • 31
    0
    votes
    1 answer

    jQuery UI Droppable/Draggable

    Here is my JS Fiddle. In the JS Fiddle there are 3 Droppables within a div called 'droppables' and 3 Draggables within a div called 'draggables'. You can drag any of the draggables onto any of the droppables and it will update the corresponding div…
    TaylorM
    • 109
    • 1
    • 11
    0
    votes
    1 answer

    Swap draggable items from separated divs in the same position

    I tried to make a nice example for Draggable jQuery with Bootstrap , it's working fine till now , but i need the draggable swap the divs . HTML :
    0
    votes
    1 answer

    Allow element to drag & drop in one TR only

    In this jsFiddle. I want to add prevent drag and drop functionality if TR is changed of the element. Elements can be dragged and dropped in their own TR only. How can I do this? Should I add some restriction in accept method ? Following is the JS…
    Nisarg
    • 3,024
    • 5
    • 32
    • 54
    0
    votes
    1 answer

    Enable droppable element to accept draggables only when it is empty

    In this jsFiddle I am getting one issue. Let me describe When I drag any element contains "N" to other is working good. But after that when I try to drag any element to it's original position is not working. My expectation : When any element is…
    Nisarg
    • 3,024
    • 5
    • 32
    • 54
    0
    votes
    1 answer

    Get JQueryUI Draggable Element

    How do I get the Draggable Element on stop event? the JQuery UI documentation indicates that the ui parameter only gives helper, position and offset. unlike the resizable's stop event which ui.element is available.
    Louie Almeda
    • 5,366
    • 30
    • 38
    0
    votes
    1 answer

    Preview draggable element in droppable area before element is dropped

    I am trying to implement dragging and dropping. Everything works as expected however, when the user is dragging a div containing text to a droppable div containing text I would like the user to be able to see what it would look like when they have…
    Rob
    • 333
    • 5
    • 25
    0
    votes
    1 answer

    JQuery - Disable draggable element based on data selector

    I have an appended draggable element which has a dynamic value for attribute data-pin: var pin = 0; $('#pins').append("
    "); $('*[data-pin=' + pin + ']').draggable({ stack: '#pins div', revert:…
    IlludiumPu36
    • 4,196
    • 10
    • 61
    • 100
    0
    votes
    1 answer

    Is jQuery UI Sortable function work for more than one table simultaneously?

    I have a design where more then one table ,there have use jQuery UI Sortable function on table with single table it's work correctly but i would like to when i select or sortable work on row of first table also sort other table row ,like first table…
    Vishal Viradiya
    • 53
    • 1
    • 4
    0
    votes
    3 answers

    Make all dom elements movable

    I know I can do something like: $(function() { $( ".className" ).draggable(); }); If I want to make the class className draggable, but how about making all elements inside the page draggable ?
    Alucard
    • 1,814
    • 1
    • 21
    • 33
    0
    votes
    1 answer

    Jquery UI droppable's hoverClass in not firing in mobile device

    I am using jQuery UI draggable and droppable to achieve the output like http://www.casetify.com/design. Here is the link of my page. All is working as expected in desktop width, but its not working in mobile emulation/device. On the 3rd step of my…
    user2014
    • 388
    • 2
    • 11
    1 2 3
    …
    99 100