Home/ Questions/Q 681399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:28:45+00:00

i want to create a new ‘.b’ div appendTo document.body, and it can dragable

  • 0

i want to create a new ‘.b’ div appendTo document.body,

and it can dragable like its father,

but i can not clone the drag event,

how to do this,

thanks

this is my code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
    </head> 
<body> 
        <style type="text/css" media="screen"> 

        </style> 

        <div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>

        <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>

        <script src="jquery-1.4.2.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8"> 
$(".b").draggable({
    start: function(event,ui) {
        //console.log(ui)
        //$(ui.helper).clone(true).appendTo($(document.body))
        $(this).clone(true).appendTo($(document.body))//draggable is not be cloned,
        }
    });
$("#map_canvas").droppable({
drop: function(event,ui) {
    //console.log(ui.offset.left+'   '+ui.offset.top)
    ui.draggable.remove();
    }
});
        </script> 
    </body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like what you are trying to do is “revert” .b back to its original place after dropped. Try doing this:

    $(".b").draggable({
    revert: true,
    revertDuration: 0
});
$("#map_canvas").droppable({
    drop: function(event,ui) {
        //console.log(ui.offset.left+'   '+ui.offset.top)
    }
});
    • 0