0

I am applying droppable to rotated element.

Fiddle

The droppable events are getting triggered on the area prior to rotation and it does not get triggered on actual rotated element.

HTML

<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>

CSS

#draggable {
    width: 40px;
    height: 40px;
    background: #ccc;
}
#droppable {
    position: absolute;
    left: 250px;
    top: 80px;
    width: 225px;
    height: 35px;
    background: #999;
    color: #fff;
    padding: 10px;
    transform-origin:center;
    transform: rotate(45deg);
}

Javascript

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});

Thanks.

Xeelley
  • 1,081
  • 2
  • 8
  • 18
Rupesh Pawar
  • 1
  • 1
  • Welcome to Stack Overflow. The issue is the Bounding Box cannot be read properly after the element has been transformed. The quick way (yet not great) to address this is to wrap the element and target the drop on the wrapper. – Twisty Dec 19 '21 at 18:19
  • @Twisty I have tried that already, but it didnot work. I need the drop event to be captured exactly by the bounding box of the transformed element. – Rupesh Pawar Dec 20 '21 at 15:24
  • In that case, you will need to perform your own Collision detection via the `accept` option, when used as a function. See: https://api.jqueryui.com/droppable/#option-accept – Twisty Dec 20 '21 at 16:06
  • You may also want to read the Top answer here: https://stackoverflow.com/questions/6773481/how-to-get-the-mouseevent-coordinates-for-an-element-that-has-css3-transform – Twisty Dec 20 '21 at 16:11

0 Answers0