I'm using drag and rotate feature. Used this plugin. Drag and rotate is working fine, but I need them with in a div. So I used 'Containment' property.
I used rectangular image,
Problem:
Horizontal position: No issues dragging is working fine with in div
Vertical postion: If I rotate the image to vertical position, then if I drag image, it is going out of parent div, also right side not able to drag to fully.
JSFiddle: https://jsfiddle.net/4zwzu1f2/
Html:
<div id="draggable2" style="height:250px;width:500px;border-radius: 25px;background:grey;">
<div id="target2" style="width: 150px;height:10px; border: 1px solid #862dde; padding: 20px; padding-right: 40px;border-radius: 25px;">
Drag and rotate me!
</div>
JQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#target2').rotatable(); $('#target2').draggable({containment:'parent'});
});
</script>
Plugin references:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
