Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Large draggable item into small droppable container?

It works but it is a little problematic. When there are multiple small droppable areas near each other (15x15px) and I want to drop a 150x150px draggable item in a correct container, it is very difficult to get it right.

Is there a way to make the draggable item drop at a current cursor position?

I could then use cursorAt to specify the cursor to be outside the draggable item and it would be easy to "aim" it to correct droppable area.

like image 833
Richard Knop Avatar asked Nov 19 '10 15:11

Richard Knop


People also ask

How do I limit a draggable area?

Limit draggable area using 'containment' option It is simple. All you have to do is, add an option called containment to the draggable() method. The containment option has a value parent.

Why is draggable not working?

You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.

How do you get the position of the draggable element?

You can use the drag event: $('#dragThis'). draggable({ drag: function() { var offset = $(this). offset(); var xPos = offset.

How do I delete a draggable element?

We can disable drag and drop on HTML elements by setting the draggable attribute to false . We set draggable to false so we can't drag it. We add event listeners for the dragstart and drop events with addEventListener .


1 Answers

I have found a way:

$('.drop').droppable({
  tolerance: 'pointer',
  drop: function() {
    //
  }
});
like image 189
Richard Knop Avatar answered Nov 13 '22 06:11

Richard Knop