Allowing cloned items to be dragged again.

[christianmagill]

How can I allow cloned items to be dragged again once dropped in a droppable?

[christianmagill]

I ended up using this.. If there's a cleaner way please let me know. Thanks

$('.draggable').draggable({
      clone: true,
   });

   $('.droppable').droppable({
      disabled: false,
      activeClass: 'active',
      hoverClass: 'drop-here'
   })
   .on('droppable:drop', function(e, ui){
      if(ui.clone){
         $(ui.clone[0]).draggable();
            console.log(ui);
          }
   });

[calebelt]

I also this bug was found. I think the event fires before the advent of the DOM element.
<dragged-block></dragged-block>
<droppable-block></dropable-block>

<style>
dragged-block{display:block;width:100px;height:100px;background:#45729b;box-shadow:0 0 0 1px #fff;position:absolute;}
droppable-block{display:block;width:500px;height:500px;background:#ccc;position:absolute;left:100px;} droppable-block>dragged-block{position:relative;display:inline-block;}
</style>

<script src="js/jquery.js"></script>
<script src="js/touch-dnd.js"></script>
<script>
$(window).load(function(){

$('dragged-block').draggable({clone:true});

$('droppable-block').droppable()
.on('droppable:drop',function(){
setTimeout(function(){$('dragged-block').draggable({clone:true});},100);
});

});
</script>

[rkusa]

I am not aware of a better solution. But, if your use cases permits this, you could use sortables and connect them together.

Would you consider the drop event being fired before the DOM element got rendered as an actual issue?

[christianmagill]

Thanks