Questions tagged [jquery-draggable]

Jquery-draggable is a jquery interface to enable draggable functionality on any DOM element. Move any draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Jquery-draggable is a jquery interface to enable draggable functionality on any DOM element. Move any draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

162 questions
24
votes
2 answers

Adding a function to jQuery draggable revert "event"

What I have: I have a draggable div with a revert parameter set as "invalid". What I need: When the revert occurs I want to trigger a CSS change to another element. The problem: "revert" is parameter rather than an event so I'm experiencing great…
Dominor Novus
  • 2,248
  • 5
  • 29
  • 35
14
votes
2 answers

Getting jQuery draggable to snap to specific grid

(NOTE: Some have asked similar questions, but were too specific and yielded no usable answers) jQuery UI's draggable widget has options for snapping to a grid, but no way to set what the grid is relative to. For example, we've got a clearly defined…
Yarin
  • 173,523
  • 149
  • 402
  • 512
12
votes
3 answers

jquery ui draggable element appears behind other elements?

I am using jquery ui draggable, and eventually droppable to make it possible to reorder pictures into different boxes. When I drag a picture out of the box it appears under all the other elements once it leaves its direct container. While googling…
Kyle
  • 32,731
  • 39
  • 134
  • 184
8
votes
3 answers

jquery draggable containment array values for scaled container

If anyone could help me figure out how to make the draggable elements contained in a div that changes scale based on window size, i'd really appreciate any guidance. If I do: element.draggable({ cursor: "move", containment:…
bryan
  • 8,879
  • 18
  • 83
  • 166
8
votes
3 answers

Why does Draggable object have slow placeholder?

I really do not have a problem but, I have noticed that sometime the Draggable object has slow placeholders. I did this test: http://jsfiddle.net/X3Vmc/ $(function () { $("#myproducts li").draggable({ /*appendTo:…
Dail
  • 4,622
  • 16
  • 74
  • 109
8
votes
2 answers

Restrict drag only in one direction

Using jQuery Draggable How to restrict a draggable to be dragged only in one direction ? i.e either only top or only bottom when axis: 'y' and either only left or only right when axis: 'x' This means that if I want a draggable (with axis set to…
Uttara
  • 2,496
  • 3
  • 24
  • 35
8
votes
1 answer

how to properly bind jquery ui behaviors in meteor?

I am trying to create a group of draggable DOM objects using jQuery UI's .draggable() that are populated through Meteor subscriptions. The code I came up with looks like Meteor.subscribe('those_absent', function() { $( "li.ui-draggable"…
sbeam
  • 4,622
  • 6
  • 33
  • 43
7
votes
1 answer

Drag and drop using basic jQuery framework

Is it possible to achieve drag and drop using basic jQuery script (without using jQuery UI)?
Anish
  • 872
  • 5
  • 21
  • 42
6
votes
1 answer

Angular.js angular-dragdrop custom callback function not found

I'm using this plugin with Angular. In the documentation it says that onDrop callback method to be invoked a draggable is dropped into the droppable so I tried using it like this (the relevant part is the onDrop="myCallback"):
adamors
  • 2,672
  • 5
  • 32
  • 45
5
votes
1 answer

How to drag & drop text within contenteditable div with jQuery UI

I'm trying to move a draggable text in a div that is contenteditable. This is the div:
Facebook shuts down friends data API to generate more…
5
votes
1 answer

jQuery Draggables and Droppables Positioning

I'm using jquery UI and jQuery draggable, all my draggables use jquery clone helper and appends the draggable to droppable. Here is my code $('#squeezePage #droppable').droppable({ tolerance: 'fit', accept: '#squeezeWidgets .squeezeWidget', …
Haris
  • 1,029
  • 3
  • 12
  • 26
4
votes
2 answers

How to drag element in specific location using jquery?

jquery code $("#products li").draggable({ appendTo: "body", helper: "clone" }); $(".shoppingCart ol").droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function(event, ui) { var self =…
Sanjay Rathod
  • 1,083
  • 5
  • 18
  • 45
4
votes
1 answer

jquery draggable: draggable's handle option on the outer border of a box?

How can I configure jquery draggable's handle option to the outer layer but not the inner layer of a box? For instance, I want to drag this popup box below, when only the cursor is clicked and dragged on the black border of this popup, but not the…
Run
  • 54,938
  • 169
  • 450
  • 748
4
votes
2 answers

Jquery UI draggable not scrolling the sortable container

I have some draggable items(#draggable li) which i am dragging and dropping them in a sortable(#sortable). The sortable is wrapped by two divs and the outermost div has overflow-y: scroll. The mechanism of drag and drop works fine until the…
Mandeep Jain
  • 2,304
  • 4
  • 22
  • 38
4
votes
1 answer

How do I use jQuery UI widgets safely within the Meteor framework?

jQuery UI is not yet a Meteor "package", and even if it eventually becomes one, there will be newer jQuery and jQuery UI versions, and other jQuery plugins that one might want to use with Meteor. There are a variety of issues that arise: Load via…
jpeskin
  • 2,801
  • 4
  • 28
  • 27
1
2 3
10 11