Stack Overflow
Stack Overflow

Questions tagged [jquery-ui-droppable]

The jQuery UI Droppable plugin makes selected elements droppable so they accept being dropped on by draggables.

The Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

Useful links

Related Tags

658 questions
6
votes
1 answer

jQuery UI Droppable Accept drops from only certain classes

I have 3 div elements all with class abs and only one of them has and additional class outside as you see below. All elements are draggable and droppable (using jquery ui). The problem is I do not want the div with class outside to be dropped into…
Hussein
  • 42,480
  • 25
  • 113
  • 143
6
votes
4 answers

When using jquery-ui droppable, how can you remove an item from the droppable area after you have already dropped it?

I have a html page with some images that are dragggable and a set of divs that are droppable. It all works fine using the below code but I can't figure out how i can REMOVE AN ITEM from the droppable area after its been dropped. (lets say the user…
leora
  • 188,729
  • 360
  • 878
  • 1,366
6
votes
0 answers

Update caret position of input and insert text on drop event

Background I am attempting to drag-and-drop a
element inside an using the jQuery UI Draggable and Droppable components. At the moment, I have to place the caret in the position I would like the text to appear in and then drag-and-drop…
Seany84
  • 5,526
  • 5
  • 42
  • 67
5
votes
4 answers

jQuery UI droppable: resizing element on hover not working

I have a jQuery UI droppable element which I would like to get bigger when a draggable is hovered over it. I have tried both using the hoverClass option and also binding to the drophover event. Visually, both these methods work fine. However, once…
lucas
  • 1,910
  • 2
  • 21
  • 25
5
votes
1 answer

jquery UI droppable and sortable not working?

I searched around and couldn't find a solution to this problem. I am trying to integrate jqueryUI sortable and draggable but I can't seem to get it to work. I have a VERY basic demo here. I've tried to reduce it to the SIMPLEST implementation…
kidcapital
  • 5,064
  • 9
  • 46
  • 68
5
votes
1 answer

jQuery drag and drop simulation does not work for the last draggable

I am trying to simulate the drag and drop simulation using jquery-simulate-ext plugin of jquery-ui. Before I give the details of the scenario , let me show you the js fiddle here . I have 3 columns of divs. In 1st column, I have 3 draggables with…
Istiaque Ahmed
  • 6,072
  • 24
  • 75
  • 141
5
votes
0 answers

Unable to add widget every after "dragstop" event [gridstack plugin + jqueryui]

Setup: [gridstack] I'm using "0.4.0" merged to "1.0.0-dev" from the develop branch. I have a column for the plugin/widget that I will drag onto the grid, so basically I use the jQueryUI for droppable and draggable. Just discovered an issue while…
heero
  • 278
  • 4
  • 15
5
votes
2 answers

Drag and drop multiple selected draggables and revert invalid ones using Jquery UI

Drawing a box with cursor (lasso) will select multiple .item in this JSFiddle example. Selected .item's become draggable. Empty .slot without an .item inside is a valid droppable. When you drop multiple draggables on multiple droppables, only the…
Ray C Lin
  • 703
  • 3
  • 8
  • 24
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
5
votes
1 answer

jQuery UI : draggable behaviour while dropping object using tolerance touch

When using jQuery Ui draggable tolerance touch, I am facing problem like when the element touches two droppable elements of same class it is dropped in both the droppables. I have added a image below to describe the problem. This can be done by…
Sathiyamoorthy
  • 419
  • 4
  • 10
5
votes
1 answer

Triggering a drop event with jQuery droppables

Variations of this question have been asked, but the answers are all different, somewhat dated, and aren't working for me so I'm hoping it's a matter of changed syntax rules in jQuery that I'm missing. The scenario HTML:
DA.
  • 39,848
  • 49
  • 150
  • 213
5
votes
1 answer

Using jquery droppable, how can I replicate the behavior of trello dropping people images onto cards where it snaps to the bottom right of the card?

I have a bunch of images that are draggable and I have a bunch of items that are droppable. In trello, when i drag a picture over a card, it snaps to the bottom right of the card. If i drag another person's picture on that same card, it snaps to…
leora
  • 188,729
  • 360
  • 878
  • 1,366
5
votes
1 answer

jQueryUI droppable : over and out callback firing out of sequence

UPDATED js fiddle (updated) here i want to know, Whether dragging element is inside any column or not? it's works for me when i drag Left to right but not working when i drag right to left. jS var isOutside = true; $('.drag').draggable({ …
Array out of bound
  • 1,133
  • 7
  • 24
5
votes
4 answers

Jquery UI Droppable: How can I use different hoverClass values based on some logic?

I am using the JQuery UI droppable library features, and I want to provide visual user feedback when they hover over a droppable target. For this I can easily use the hoverClass option to specify which class to use when they have a draggable item…
musefan
  • 47,875
  • 21
  • 135
  • 185
5
votes
1 answer

jQuery.draggable() - Revert on button click

I have several draggable & droppable elements on my page, which have accept properties. Currently my code is set up like: $(".answer." + answer).draggable({ revert: "invalid" , snap: ".graph" }); $(".graph." + graph).droppable({ accept:…
Curtis
  • 101,612
  • 66
  • 270
  • 352
1 2
3
…
43 44