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
16
votes
1 answer

How to find out about the "snapped to" element for jQuery UI draggable elements on snap

I'm working a few draggable elements that should be snapping to other elements, which all have classes, something like, ".classes" and also a unique id, "#class_id". Once the draggable elements are done being dragged, I would like to find out which…
jet
  • 698
  • 6
  • 12
16
votes
3 answers

jQuery UI Draggable/Sortable - Get reference to new item

I am using the jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) for the basis of my project. I need to get a reference to the
  • that gets cloned into the sortable when the sortable receives it. I tried the…
    • Mark Richman
    • 28,948
    • 25
    • 99
    • 159
    16
    votes
    5 answers

    Error jquery-ui draggable Cannot read property 'msie'

    I got some troubles to make work jquery-ui draggable. I will share with you my solution, this is the best solution? I just insert this to test before I start my real work.
    Thyago Quintas
    • 669
    • 2
    • 7
    • 12
    16
    votes
    3 answers

    dragging items based on percentage to containment element

    Here is what it looks like; $( "#box ul li" ).draggable({ helper: "clone" }); $( ".item" ).draggable({containment: ".door"}); $( ".door" ).droppable({ accept: ":not(.ui-sortable-helper, .item)", drop: function( event, ui ) { $(…
    Recep Şimşek
    • 569
    • 7
    • 16
    16
    votes
    4 answers

    Guides when moving jquery-ui-draggable boxes

    I am working on how to show guides when moving boxes like it is in Google Docs Drawing. I would prefer an open-source code or any type of guide before starting writing my own. I do not need drag-n-drop across multiple browser windows so i don't…
    Imran Naqvi
    • 2,202
    • 5
    • 26
    • 53
    15
    votes
    4 answers

    jQuery UI how to set draggable containment option on parent's parent

    The jQuery UI Draggable interaction has a nice property for setting the containment as the parent. $( ".selector" ).draggable({ containment: 'parent' }); I wish to set the containment as the parent's parent. There is no string value to…
    steampowered
    • 11,809
    • 12
    • 78
    • 98
    14
    votes
    1 answer

    Set position of draggable div

    I'm doing a little application using jQuery and JQuery ui. I've defined a dragable div, and it works perfectly, but I want to set the position of the div when a click a button... I read here in stackOverflow to do this: element.position().top =…
    Andres
    • 11,439
    • 12
    • 48
    • 87
    14
    votes
    1 answer

    Owl carousel V1 disable/enable drag

    Hey all I have a quick question regarding the Owl Carousel. How can I enable the touchdrag when I first use this code: var owl = $(".full-slider"); owl.owlCarousel({ slideSpeed : 500, singleItem : true, …
    StealthRT
    • 10,108
    • 40
    • 183
    • 342
    14
    votes
    2 answers

    Drag-Drop elements between parent frame and child iframe

    I am trying to drag-drop elements between parent frame and iframe using jQuery. I have a panel in parent frame which contains some draggable items which can be dropped on the child frame. I tried to search a lot but couldn't find much... I tried to…
    Kshitiz
    • 2,852
    • 5
    • 32
    • 41
    13
    votes
    3 answers

    JQuery draggable with ease

    I would like to achieve the ease effect with Jquery's draggable. But I did not find the option in this plugin. So I was wondering if there are other plugins that have this option - or an easy solution. The effect I am trying to achieve is something…
    dandoen
    • 1,647
    • 5
    • 26
    • 44
    13
    votes
    1 answer

    Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

    On ui draggables ( http://jqueryui.com/demos/droppable/#revert ) is it possible to revert a div if its inside one div and if not inside another one? for example like this $( "#draggable" ).draggable({ revert: "valid", revert:"invalid" }); but that…
    Logan
    • 10,649
    • 13
    • 41
    • 54
    13
    votes
    4 answers

    How do I programmatically abort a jQuery drag operation?

    How do I programmatically abort a jQuery drag operation? Using jQuery UI, the user begins a drag operation. While dragging, an asynchronous event occurs that causes the dragged element to be deleted (a timer-based refresh, for example). In the…
    remack
    • 303
    • 2
    • 7
    13
    votes
    1 answer

    Stop jQuery draggable from scrolling off screen

    When using jQuery UI draggable on a div element you can drag the element "off" the right side of the page, but the page will simply extend and autoscroll with the element. This is problematic as I am trying to initiate an event when the element…
    DasBeasto
    • 2,082
    • 5
    • 25
    • 65
    12
    votes
    1 answer

    jquery sortable only by dragging header

    I want to have two sections on my webpage which can be dragged left or right of each other: