Draggable Clones wont resize - Qjuery UI

dealclickcouk
dealclickcouk used Ask the Experts™
on

I have been trying to create a "canvas" where I can drag copies (clones) of objects (product images) into a container, and then be able to drag and resize the individual clones in the drop container.

The code snippet below works with dragging a clone into the container, the new clone can then be dragged, but then I add resize the dragging stops.

Any help on how to resolve this and let drag and resize play nicely on cloned objects would be cool.

Thanks
$(document).ready(function() {
    var nextItemId=1;
    $("#container").droppable({
        accept: '.product',
        tolerance: 'pointer',
        drop: function(event, ui) {
                $(this).append($(ui.helper).clone(true).attr('id','item'+nextItemId++));
                $("#container .product").addClass("item");
                $(".item").removeClass("ui-draggable product");
                $(".item").draggable({
                    containment: 'parent',
                    grid: [5,5]
                });
                //$(".item").resizable();
                $("#item"+nextItemId).resizable();
                
        }
    });
    $(".product").draggable({
        helper: 'clone',
        cursor: 'hand'
    });
    //$(".product").resizable();
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
yup I've seen that already, that helped me get to this stage, but doesn't get me any further unfortunatley
Top Expert 2010

Commented:
Do You have a link to Your page maybe? Its a little bit confusing, so I would like to look myself.

Regards
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Please give the whole HTML for easy testing.

Author

Commented:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
<script language="javascript" type="text/javascript">

$(document).ready(function() {
    var nextItemId=1;
    $("#container").droppable({
        accept: '.product',
        tolerance: 'pointer',
        drop: function(event, ui) {
                $(this).append($(ui.helper).clone().attr('id','item'+nextItemId++).addClass("resizable ui-resizable"));
                $("#container .product").addClass("item");
                $(".item").removeClass("ui-draggable product");
                $(".item").draggable({
                    containment: 'parent',
                    grid: [5,5]
                });
                //$(".item").resizable();
                //$("#item"+nextItemId).resizable();
        }
    });
    $(".product").draggable({
        helper: 'clone',
        cursor: 'hand'
    });
    //$(".product").resizable();
});
</script>    
</head>
<body style="font-size:62.5%;">

<div id="products">
    <img id="productid_1" src="pic1.png" class="product" alt="" title="" width="100" height="100" />
    <img id="productid_2" src="pic2.png" class="product" alt="" title="" width="100" height="100" />
    <img id="productid_3" src="pic3.png" class="product" alt="" title="" width="100" height="100" />
</div>
<div id="container" style="width:900px;height:900px;border:1px dashed #c0c0c0">
</div>


</body>
</html>

Open in new window

Top Expert 2010
Commented:
Here You go. The problem was in the fact that You should first apply resizable and then draggable. However, resizable also creates wrapper div around object so we needed to make that wrapper draggable.

Regards

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
<script language="javascript" type="text/javascript">

$(document).ready(function() {
    var nextItemId=1;
    $("#container").droppable({
        accept: '.product',
        tolerance: 'pointer',
        drop: function(event, ui) {
                $(this).append($(ui.helper).clone().attr('id','item'+nextItemId++).addClass("resizable ui-resizable"));
                $("#container .product").addClass("item");
                $(".item").removeClass("ui-draggable product");
				$(".item").resizable().parent().draggable({
                    containment: 'container',
                    grid: [5,5]
                });				
        }
    });
    $(".product").draggable({
        helper: 'clone',
        cursor: 'hand'
    });
});
</script>    
</head>
<body style="font-size:62.5%;">

<div id="products">
    <img id="productid_1" src="pic1.png" class="product" alt="" title="" width="100" height="100" />
    <img id="productid_2" src="pic2.png" class="product" alt="" title="" width="100" height="100" />
    <img id="productid_3" src="pic3.png" class="product" alt="" title="" width="100" height="100" />
</div>
<div id="container" style="width:900px;height:900px;border:1px dashed #c0c0c0">
</div>


</body>
</html>

Open in new window

Top Expert 2010

Commented:
One little correction. Put containment: 'parent' instead of containment: 'container'.

Regards

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial