Stack Overflow
Stack Overflow

Questions tagged [droppable]

Usually refers to a HTML element that can be dropped onto another element by dragging

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

590 questions
31
votes
5 answers

How to check if an element is droppable, draggable or other 'ble'?

I've got a bunch of elements with jQuery. Some are draggable, some are droppable and some are both. How can I detect if an element is draggable or droppable?
Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
31
votes
7 answers

jQuery draggable + droppable: how to snap dropped element to dropped-on element

I have my screen divided into two DIVs. In the left DIV I have a few 50x50 pixel DIVs, in the right DIV I have an empty grid made of 80x80 LIs. The DIVs on the left are draggable, and once dropped on a LI, they should snap to center of that…
10goto10
  • 896
  • 1
  • 8
  • 10
25
votes
8 answers

jquery droppable accept

Can anyone tell me how I can write a function in accept condition and then how does it finds out that what to accept and what not to accept. For example, I want to accept div a and div b in accept condition. How can I write I through a function?
Nishima
16
votes
1 answer

How to cancel a drop action for jQuery droppable?

I have a jQuery UI droppable which accepts draggables. I want to not allow the drop action if certain conditions are met. How do I cancel the drop action and do a revert like action?
Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374
15
votes
3 answers

How do I trigger the Drop event with jQuery UI Droppable without actually dragging and dropping?

I have a droppable with a drop event handler: $(this).droppable({ drop:function(){ console.log('OMG You Dropped It!'); } }); I have a draggable: $(this).draggable(); What I want to do is trigger the drop event handler on the droppable…
Kappers
  • 1,341
  • 3
  • 15
  • 26
15
votes
6 answers

JQuery-UI draggable reset to original position

This is probably very easy to do, but I always think too complicated. I've just set up a simple test with #draggable / #droppable with a fixed width/height + float:left. I then want a reset button to be able to reset the #draggable to it's original…
user2110966
  • 155
  • 1
  • 1
  • 7
14
votes
5 answers

In jQuery, how to revert a draggable on ajax call failure?

I want the draggable to be reverted to its original position if the ajax call on drop returns a failure. Here is the code what I am imagining it to be.. It is OK if the draggable rests in the droppable while the ajax call is in process...
NikhilWanpal
  • 2,960
  • 3
  • 23
  • 40
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
11
votes
2 answers

Making a jQuery droppable accept items from a sortable which is using connectWith

I've got a sortable list which is using connectWith to ensure it can only be sorted within its own types of list. Now I'm trying to make a droppable trash can element that appears at the bottom on the viewport when an item is being sorted. This…
tags2k
  • 82,117
  • 31
  • 79
  • 106
10
votes
1 answer

Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop

I have set up FullCalendar to accept drops, which it does. But the draggable object, which I have constructed with revert:'invalid' does not seem to recognize the dates on FullCalendar as droppable, and reverts back. Here is my code:
Flavius
  • 125
  • 1
  • 1
  • 8
10
votes
3 answers

Angular ng-sortable - Basic example of how it works

SITUATION: Hello guys! In my app i have a sort of kanban: there are some columns, each containing a list of items. I need to drag and drop items among columns and reorder them inside the same column. I have tried before three angular modules…
FrancescoMussi
  • 20,760
  • 39
  • 126
  • 178
8
votes
1 answer

Sortable & droppable, droppable are doesn't update, when DOM does?

I'm making a UI that involves sortables, in which there are droppable list items. Here's a fiddle of it: http://jsfiddle.net/NRkwx/ The problem is this: when you start sorting, and move the list item around, the droppables move too, but the area…
Martti Laine
  • 12,655
  • 22
  • 68
  • 102
8
votes
4 answers

Get attribute of JQuery ui.draggable

I'm using JqueryUI for drag and drop on one of my pages and for some reason I can't seem to get an attribute of the ui.draggable object being passed into my droppable drop event. ui.draggable.attr("src") and $(ui.draggable).attr("src") both return…
Jon
  • 5,956
  • 10
  • 39
  • 40
7
votes
1 answer

Calling $(item).sortable('cancel') on Drop event of droppable disables sortable

I have some sortable connected list, that are at the same time droppable places. The problem is that when I call the cancel method of sortable in the drop event of droppable, the sortable is broken and wont work any more. Example…
albanx
  • 6,193
  • 9
  • 67
  • 97
7
votes
2 answers

jQuery UI, Draggable, Droppable, Auto Scroll

I have a set of droppable li elements that accepts a draggable icon. The list of items is in a scrollable div element. I put together a simple example here: http://www.nerdydork.com/demos/dragscroll/ I'm wondering if there is a way to autoscroll the…
Dustin
  • 3,965
  • 5
  • 27
  • 33
1
2 3
…
39 40