Having trouble implementing a Drag & Drop feature. The droppable div is styled with CSS transformations, but the draggable div doesn't drop correctly on the right part of the box.
If you'd like to take a look at the code and try it out yourself, here's a simplified version along with a jsFiddle link: https://jsfiddle.net/t5e2qvgt/8/
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("span")
.html("Dropped!");
}
});
#draggable {
width: 50px;
height: 50px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: right;
margin: 10px;
}
.droptarget {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-moz-transform: skew(45deg, 0);
-ms-transform: skew(45deg, 0);
-o-transform: skew(45deg, 0);
-webkit-transform: skew(45deg, 0);
transform: skew(45deg, 0);
}
.droptargeticon {
-moz-transform: skew(-45deg, 0);
-ms-transform: skew(-45deg, 0);
-o-transform: skew(-45deg, 0);
-webkit-transform: skew(-45deg, 0);
transform: skew(-45deg, 0);
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="droppable" class="droptarget ui-widget-header">
<div class="droptargeticon">
<p>Drop here</p>
</div>
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag</p>
</div>