Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
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>
Posted
Updated 12-Mar-13 2:27am
v2

1 solution

You can declare cursor property like below:
JavaScript
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });


see more on
http://jqueryui.com/draggable/#cursor-style[^]
 
Share this answer
 
Comments
geethika amu 13-Mar-13 0:00am    
Thanq for reply sir
why we are using cursor over there

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900