开发者

how to clone the drag-event using jquery and jquery-ui

开发者 https://www.devze.com 2022-12-22 17:23 出处:网络
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,

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/javascr开发者_StackOverflow中文版ipt" 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>


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)
    }
});


Deep copy wont work with clone, try using the jQuery live

$(".b").live("draggable", function() { 
//impl 
});

the live event means that every object created will be checked if the selector matches and have the event added.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号