JQuery UI draggable - if item is being dragged

Question

I want that when dragging a draggable div into a droppable div , the droppable div color gets a different color, and then the draggable div width / height gets bigger and fits the droppable div exactly.

Here is the JSFiddle

For example, when you drag a red circle into a large circle, I want to move the large color of the div to red, and the red circle is suitable for the large div.

for these questions, I wrote down these codes:

    if ($(draggable).hasClass('dropped')) {
        droppable.css({
            background: 'red'
        });
        draggable.css({                    
            width: '300px',
            height: '300px'
        });
    }

but this does not work, and I do not know how to make draggable suitable for droppable.

Answer 1

draggable droppable, . .data() ( , ).

:

$('#BigSix').droppable({
   hoverClass: 'drop-hover',
   drop: function (event, ui) {
      var _this = $(this);
      ui.draggable.addClass('dropped')
      .data('droppedin', _this)
      .data('SixIndex',ui.draggable.index());
      _this.droppable('disable')
      .append(ui.draggable)
   }
});

:

var prevElemIndex = $(this).data('SixIndex')-1;
if(prevElemIndex==-1) {
   $("#container").prepend($(this))
}
else {
   $(".Six:eq("+prevElemIndex+")").after($(this))
}

CSS -:

#BigSix div.Six {
//(!important isnt good but i dont see another way around it)
    position: absolute !important;
    top:0 !important;
    left:0 !important;
    width: 100%;
    height: 100%;
    border: none;
}

CSS position: relative #BigSix box-sizing:border-box .Six

Fiddle: http://jsfiddle.net/37YpH/3/