droppable doesn't accept resized cloned draggable

droppable doesn't accept resized cloned draggable

I am new at jqueryui. I am trying to create a week schedule where I can
place activities on them by using draggables and droppables. Also, I am
avoiding to use selectables because I want more control over theses
draggables. I have a html table where I have placed each droppable with
its own unique "id" representing the day and hour. I have created a
draggale that is able to be cloned and later resized. the drag and drop
events work fine. My problem is that after dropping and resizing, I can't
get the draggable to drop to another droppable. I am using firefox as my
main browser. This has been confusing, I have searched online and haven't
found a similar problem. any insights will be appreciated.
$(document).ready(function() {
$('.act').draggable({
addClasses: true,
scope: "dg",
snap: ".hds",
snapMode: "inner",
snapTolerance: "60",
cursor: 'move',
helper: 'clone'
});
$('.act').resizable({
handles:"all",
maxWidth: 719,
maxHeight: 1270,
ghost:true,
animate: true,
animateEasing: "swing",
autoHide: false
});
$('.hds').droppable({
accept:function() { return true; },
scope: "dg",
drop: function(event, ui){
if(!ui.draggable.hasClass("dropped" )&&
$(this).find(".act").length==0 ){
var drag1=$(ui.draggable).clone();
drag1.find('.ui-resizable-handle').remove();
$(this).append(drag1.addClass("dropped").draggable({
addClasses: true,
scope: "dg",
snap: ".hds",
snapMode: "inner",
snapTolerance: "60",
cursor: 'move',
helper: 'clone'
}).resizable({
handles:"all",
maxWidth: 719,
maxHeight: 1270,
ghost:true,
animate: true,
animateEasing: "swing",
autoHide: false})
);
}// end of if statement
else {if($(this).find(".act").length==0 ){//start of else
statement
$.ui.ddmanager.current.cancelHelperRemoval = true;
$(this).append($(ui.draggable));
}
}
}
});//end of droppable
});// end of document