<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>
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)