how to clone the drag-event using jquery and jquery-ui
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.
加载中,请稍侯......
精彩评论