无法拖动对象的克隆(JQuery)

Posted

技术标签:

【中文标题】无法拖动对象的克隆(JQuery)【英文标题】:Cannot drag clones of objects (JQuery) 【发布时间】:2011-05-27 07:57:58 【问题描述】:

当我尝试拖动克隆对象时,它会拖动原始对象。我该如何解决这个问题?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type='text/javascript' src='js/jquery-1.4.4.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.6.custom.min.js'></script>
<style type='text/css'
    #calendar width: 900px; margin: 0 auto;
    .container position: absolute;    top: 0pt; left: 0pt;
    .block background-color: rgb(153, 255, 102); position: absolute; z-index: 8; width: 131px;    height: 50px;border: 1px solid;
</style>
<script type='text/javascript'>    
    $(function() 
        $( ".block" ).draggable();
        selector = $('.special').clone(true).show()
        .css(left:'', top:'', position:'', borderWidth:'1px', marginBottom: '2px')
        .find('span').text('Cloned').end().appendTo('.container');
    );
</script>
</head>
<body>
<div id='calendar'>    
    <div class="container">                
        <div class="block special" style="left: 278px; top: 300px;">
            <span>Original</span>
        </div>        
    </div>
</div>
</body>
</html>

【问题讨论】:

【参考方案1】:

正如您所发现的,jQuery 中的.clone(true) 克隆了原始元素的事件处理程序。

要解决这个问题,您可以尝试使用此答案中定义的 liveDraggable 函数:

jQuery Drag And Drop Using Live Events

【讨论】:

以上是关于无法拖动对象的克隆(JQuery)的主要内容,如果未能解决你的问题,请参考以下文章

克隆一个 Jquery 可拖动对象也会拖动它的原始对象

在 jQuery UI 中克隆可拖动对象时,如何将数据和事件传输到新元素?

如何调整克隆的 jQuery UI 元素的大小(图片)

jquery克隆拖动

jQuery可拖动克隆的div

jQuery-UI 可拖动克隆 - 启动处理程序是不是收到对被克隆元素的任何引用?