Не удается перетащить Динамическая прилагаемая DIV

Question

http://liveweave.com/rh0ILM

http://jsbin.com/IZodOSU/1/edit

Все дивы с классом сопротивления должны быть перетаскиваемым, но когда один добавляется это не перетаскивать. Может ли кто-нибудь помочь мне с этим?

HTML

<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script> 
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script> 
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script> 

<button id="divgen">Gen Div</button> 

<div class="container"> 
    <div class="drag" style="left:20px;"></div> 
    <div class="drag" style="left:100px;"></div> 
    <div class="drag" style="left:180px;"></div> 
</div> 

CSS

.drag { 
    position: absolute; 
    border: 1px solid #89B; 
    background: #BCE; 
    height: 58px; 
    width: 58px; 
    cursor: move; 
    top: 120px; 
} 

JS/JQuery

jQuery(function($){ 
    $('.drag').drag(function(ev, dd){ 
     $(this).css({ 
      top: dd.offsetY, 
      left: dd.offsetX 
     }); 
    }); 

    $("#divgen").click(function() { 
     $("div.container").append('<div id="whatever" class="drag">my div</div>'); 
    }); 
}); 

Answer 1

Попробуйте нижеследующее. Вы должны использовать делегирование, поскольку DIV динамически создается.

$('.container').on('drag','.drag',(function(ev, dd){ 
    $(this).css({ 
     top: dd.offsetY, 
     left: dd.offsetX 
    }); 
})); 

Working Demo

Answer 2

Поскольку ДИВ вновь добавляется к DOM, в $ ("# divgen"). click (....) вам нужно повторно запустить функцию перетаскивания.

Answer 3

Вызвать функцию перетаскивания еще раз после того, как новый DIV добавляется.

jQuery(function($){ 
    $('.drag').drag(function(ev, dd){ 
     $(this).css({ 
      top: dd.offsetY, 
      left: dd.offsetX 
     }); 
    }); 

    $("#divgen").click(function() { 
     $("div.container").append('<div id="whatever" class="drag">my div</div>'); 
     $('.drag').drag(); // Call drag function. 
    }); 
});