Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery clone Drag drop resize , +
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 11-Mar-13 22:21pm
Edited 12-Mar-13 3:27am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You can declare cursor property like below:
 $( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } }); 
 
see more on
http://jqueryui.com/draggable/#cursor-style[^]
  Permalink  
Comments
geethika amu at 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)

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 210
2 BillWoodruff 205
3 Jochen Arndt 180
4 Sergey Alexandrovich Kryukov 165
0 OriginalGriff 5,130
1 DamithSL 4,157
2 Maciej Los 3,650
3 Kornfeld Eliyahu Peter 3,460
4 Sergey Alexandrovich Kryukov 2,811


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 12 Mar 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100