Hello
I am doing a project in that I need drag images from drop down list to container after dropping on to div the image should be selected at the same time it have to show anchors for re sizable and rotatable.
I have done till drag,drop and clone of images (in that the image is going out of container don't known why still working on it)it is working if we use without drop down's but i don't know how to show anchors for re sizable,rotatable and selectable.I have searched for sample code couldn't find any relevant solution.Can anyone help me on this.
Thanks in advance any help would be appreciated.
The below is the code for drag,drop and clone
<pre> <head>
<style type="text/css">
.drag
{
}
.drop-zone
{
border: 1px solid #9C9898;
height: 350px;
width: 400px;
margin: 0px;
margin-top: 80px;
}
</style>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.drop-zone').droppable({
accept: '.drag',
drop: function (event, ui) {
var $clone = ui.helper.clone();
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '.drop-zone'
}));
}
}
});
$('.drag').draggable({
helper: 'clone'
});
});
</script>
<body>
<div id="right" style="float: right;">
<img alt="" src="../../Content/themes/base/images/Design3.png " class="drag" /><br />
<img alt="" src="../../Content/themes/base/images/Design15.png" class="drag" /><br />
</div>
<div id="drop-zone" class="drop-zone">
</div>
Submit an article or tip