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

Fabric.js Image.fromURL not working in Firefox

I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas on Chrome everything works fine. However, when I drag and drop an image on Firefox it does nothing and I get the following error in…
Ryan
  • 122
  • 1
  • 13
0
votes
1 answer

jQuery-ui draggable does not fit in sortable list

I have a sortable list and some draggable elements, which I created with jquery-ui. I want to drag the draggable elements into the sortable list, so the are added in the last. I have used the "connectToSortable" option but nothing is happening when…
manosagent
  • 614
  • 8
  • 18
0
votes
2 answers

Jquery UI Draggable clone disappearing

I am trying to use the jquery-ui draggable to make some element draggable. I set the helper option to clone the current element. It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place. See this…
Saif
  • 6,804
  • 8
  • 40
  • 61
0
votes
1 answer

Selecting elements moved out of viewport by Jquery draggable

My situation is this: I have a large container the size of the screen which is static and has overflow:hidden. Inside is a very large div that is jqueryui-draggable. Inside that are many many small divs. The small divs are all hidden by default,…
jrabramson
  • 105
  • 1
  • 8
0
votes
3 answers

Jquery Draggable and Droppable with Multiple Draggable

Kind of new to jquery and I am working with the draggable and droppable stuff. I have two draggables and a droppable. I can't quite figure out how to make it do different things based on which box I drop. Here is my jquery: $(function() { …
0
votes
1 answer

jquery ui draggable scroll auto

I want to implement draggable on a container with fixed height and width but has scrolls on demand that mimics infinite surface. Here is the css .drag { width: 100px; height: 100px; border: 1px solid black; cursor: pointer; …
prabir
  • 7,674
  • 4
  • 31
  • 43
0
votes
1 answer

jQuery UI Droppable with Bootstrap Navbar - How to drop a item inside Dropdown

I am using jQuery UI droppable with Bootstrap Menu Navigation... I want to drag a element item from "Menu Items" dropdown and drop inside "My Apps" Dropdown. The dropped element should go inside as "My Apps > ul > li" which will be hidden by default…
0
votes
1 answer

jQuery UI Draggable inside overflow-y: auto; div issue

I am building an interface using jQuery UI drag and drop. I have a series of flexbox containers, one of which contains a list in which items can be dragged and dropped on top of each other. The list can be longer than the available height of the…
phonicx
  • 479
  • 2
  • 14
0
votes
1 answer

jsTree 3: use a drag handle to restrict initiating dragging

Using jsTree 3.0.8 I want to allow nodes to be dragged and dropped within the tree, but it should only allow that action if it was initiated by a drag on a specific button or "drag handle", instead of the default behavior of allowing dragging…
0
votes
1 answer

Using jQuery Draggable with grid and multiple draggable elements

I'm trying to find an better solution to drag multiple elements at once, all elements snapping to a grid, with jQuery UI draggable. I found a working solution there for the multiple drag part. I adapted it to be able to use the grid with a "round to…
Finrod
  • 2,425
  • 4
  • 28
  • 38
0
votes
0 answers

Highcharts draggable points in line type gets hidden with axis

I am little bit confused with Hightcharts draggable points where the points are getting hidden over the axis in iPad (touch device) I am using "draggable-points" plugin to drag over with Hightcharts. If anybody faced this kind of a problem, please…
Anand
  • 99
  • 10
0
votes
0 answers

Access to created element after dragging to droppable in clone mode

When i drag the element to a droppable area (in clone mode), Every event i use returns source element, But i want to access new created element (in fact clone of draggable). For example this one: $( "body" ).on( "drop dragstop deactivate blahblah",…
Morteza
  • 2,097
  • 5
  • 28
  • 47
0
votes
1 answer

Jquery Draggable/Sortable and programmatically clicking on an input[file]

I am encountering a strange bug using JQuery Draggable and Sortable plugins. I have a list of draggable objects that can be added to a sortable container. The function of the page is to be able to add content (draggables) to a page (sortable) and…
0
votes
0 answers

jQuery UI drag - position top and left px value is float - how to override?

I'm building a simple drag and drop application. However, when I drop the element on a droppable it adjusts itself by a pixel either top, left or sometimes both. Looking at the console. when I drag the element its top, left position shows as (if I…
user3065931
  • 531
  • 7
  • 20
0
votes
3 answers

jQuery - Droppable area should not allow duplicates and count the dropped
  • elements
  • I am using jQuery Droppable UI. How can I stop dropping the same element in the targetted area. Fiddle Scenario: I have menu items which I can drop the the same either Add to Favs div or Quick Links div or to Both divs to create a shortcut. But…
    Reddy
    • 1,477
    • 29
    • 79