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 Richard MacCutchan 269
1 Aajmot Sk 252
2 Marcin Kozub 235
3 Sergey Alexandrovich Kryukov 185
4 Praneet Nadkar 167
0 OriginalGriff 7,913
1 Sergey Alexandrovich Kryukov 7,232
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,865


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.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