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

jQuery UI Droppable - How to actually change the HTML?

Using jQuery UI's Droppable I have made a shelf type thing where the items contained on it can be moved. Here's the code: http://jsfiddle.net/JoeyMorani/7LWj4/ Is it possible to actually change the HTML of the shelf, so when the '.boxArt' divs are…
Joey Morani
  • 25,431
  • 32
  • 84
  • 131
4
votes
3 answers

jQuery Draggable containment issue, cannot drag elements outside parent div

I have a very simple image manager, like so:
…
CodeVirtuoso
  • 6,318
  • 12
  • 46
  • 62
4
votes
1 answer

jQuery UI : sortable and draggable behaviour while dropping object

When working with jQuery sortable, draggable and dropable. Dropping a sortable item in sortable. Dropping a draggable in a droppable. The container in which we are dropping any object, only accepts it if the center position of that object lies in…
Imran Naqvi
  • 2,202
  • 5
  • 26
  • 53
4
votes
1 answer

jQuery UI Droppable - clone the droppable element?

JSFiddle: https://jsfiddle.net/dy556efs/2/ The elements on the left side should be cloned when dropped over to the right side. Currently, they are completely moved over - and can't get the clone helper to work properly. Could you point me in the…
Kobius
  • 674
  • 7
  • 28
4
votes
1 answer

JqueryUI resized div not dropping to correct location

I have a 'box' that can be dragged and dropped onto a column of droppable divs. The draggable box snaps to the droppable div using the JqueryUI position function, but when I resize the draggable box to 3x the original height or more, I can no longer…
Mike
  • 87
  • 8
4
votes
1 answer

jquery ui out: function not triggering

In jquery-ui documentation it says out: function is triggered when an accepted draggable is dragged out of the droppable. But in my case I want both the container to be draggable and droppable. Also I want the div with id droppable to be sortable as…
Puni
  • 1,214
  • 2
  • 18
  • 34
4
votes
1 answer

jquery drag, drop and clone, find dropped position of element

Here, is my fiddle for jquery drag, drop and clone feature. Problem: My problem is: when ever I drop element, it is showing: position: {top: 0, left: 0} only for draggable, clone and droppable element. I have also written code for finding position…
przbadu
  • 5,769
  • 5
  • 42
  • 67
4
votes
1 answer

jQuery UI draggable - if element dragged

I want when draggable div dragged into droppable div, the droppable div color get another color, then draggable div width/height get bigger and exactly fit to droppable div. Here is a JSFiddle for example, when you dragging red circle into the big…
ITSolution
  • 398
  • 2
  • 9
  • 21
4
votes
0 answers

Mouse cursor not aligned with element when appending dragged element to different div

I am experiencing an issue with the jQuery-UI draggable and droppable. The issue that I'm facing is the fact that: When I move an element from one div to another (during dragging using .append() ) it shifts the element away from the mouse cursor …
N.Schipper
  • 1,668
  • 3
  • 18
  • 25
4
votes
2 answers

When using jquery-ui Droppable, why does the accept event fire right when someone starts dragging a draggable?

I have a page with a large number of jquery UI draggables and a large number of droppables. I wanted some custom logic to determine if a droppable would accept a certain draggable so i coded up some logic in the "accept" event of the droppable. It…
leora
  • 188,729
  • 360
  • 878
  • 1,366
4
votes
1 answer

know the element you are over while dragging

I am faced with a problem almost identical to this thread: jQuery droppable - receiving events during drag over (not just on initial drag over) The only difference is I need to know the element I'm over and it's NOT a "droppable" element. It's just…
retsvek
  • 41
  • 1
4
votes
3 answers

Jquery UI - Allow droppable to have blockable div

I am unsure how to achieve what I am trying to do. I set up an example here: http://jsfiddle.net/zs6US/ $('.draggable').draggable({ revert: 'invalid' }); $('#droppable').droppable({ accept: '.draggable' }); The green box is a valid…
user2437462
  • 145
  • 9
4
votes
2 answers

Invalid mouse offset for cross-frame draggable + sortable

We are currently trying to accomplish cross-frame dragging between draggables and sortables provided by jQuery UI. This is working properly now. However, the mouse offset seems off when dragging from the parent to the child frame--please see this…
Stijn Koopal
  • 143
  • 7
4
votes
1 answer

Having Jquery sortable within droppable and draggable

I am currently working on a feature where I need to combine droppable, draggable and sortable feature all at the same time. Below is my test code. I am sorry since I was not able to get jsfiddle for this code. Droppable and Draggable is working…
user1704440
  • 79
  • 1
  • 2
  • 8
4
votes
4 answers

Javascript drag and drop: when draggable object has a fixed or absolute position it disappears behind droppable area

My problem is the following: I would like to drag and drop elements inside another div area. I am using jquery draggable and droppable elements for this particular example. However, when the position of the draggables container is set to fixed or…
mspir
  • 1,664
  • 2
  • 21
  • 34
1 2 3
…
43 44