Cannot drag clones of objects (JQuery)_问答_开发者

开发者 https://www.devze.com 2023-01-31 17:11 出处：网络

When I try to drag a cloned object, it drags the original object. How can I fix this? <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

When I try to drag a cloned object, it drags the original object. How can I fix this?

<!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/javascri开发者_运维百科pt' 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>

As you've discovered, .clone(true) in jQuery clones the original element's event handlers.

To get around this, you could try using the liveDraggable function defined in this answer:

jQuery Drag And Drop Using Live Events