Question

我想创建一个新的'.b'div appendTo document.body，

它可以像父亲那样拖拽，

但我无法克隆拖拽事件，

怎么做，

感谢

这是我的代码：

<!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>

Answer 1

深层拷贝不能使用克隆，尝试使用jQuery live

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

直播事件意味着如果选择器匹配并添加了事件，则将检查创建的每个对象。

Answer 2

看起来你要做的就是“恢复”.b掉线后回到原来的位置。试着这样做：

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

如何使用jquery和jquery-ui克隆drag-event

2 个答案: