Home/ Questions/Q 7923597
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T17:22:41+00:00

I have some jquery code that i want to able to drag, drop, clone

  • 0

I have some jquery code that i want to able to drag, drop, clone and resize. I can drag and drop and resize at the first attempt. After which i drag the cloned item around the container, it is not able to resize anymore. Any idea why?

my HTML,css and jquery from dragndrop.js as below

.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:1px solid black;

}

.drag{
    width:100px;
    border:1px solid black;
    height:40px;
    position:relative;
    background-color:red;
}

#droppable{
    width:500px;
    height :500px;
    border:1px solid black;
    }

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="dragndrop.css" />
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
           google.load("jquery", "1.6.3");
           google.load("jqueryui", "1.8.16");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
        <script src="dragndrop.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="wrapper">
            <div class = "col" id="col1">
                <div id="drag1" class="drag">
                </div>
            </div>
            <div class="col" id ="droppable">
            </div>
        </div>
    </body>
</html>

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit'
    });

    $("#droppable").droppable({

        drop: function(e, ui) {

            x = ui.helper.clone();
                  x.draggable({
                helper: 'original',
                containment: '#droppable',
                tolerance: 'fit'
            });
            x.resizable({
                maxHeight: 40,
                minHeight:40,
                minWidth:50
            });
            x.appendTo('#droppable');
            ui.helper.remove();
        }
    });

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem was that you were cloning the div that was already on the droppable surface.

    I added check (may need to be updated) to see if the id was set (when they were cloned the id was set to “”) and if it was blank then clone and add to droppable surface, otherwise, leave it alone, it’s already droppable.

            $("#droppable").droppable({

            drop: function (e, ui) {

                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    helper: 'original',
                    containment: '#droppable',
                    tolerance: 'fit'
                });
                x.resizable({
                    maxHeight: 40,
                    minHeight: 40,
                    minWidth: 50
                });
                x.appendTo('#droppable');
            }

            }
        });

    See full demonstration here http://jsfiddle.net/ezzxX/2/

    • 0