4

I want when draggable div dragged into droppable div, the droppable div color get another color, then draggable div width/height get bigger and exactly fit to droppable div.

Here is a JSFiddle

for example, when you dragging red circle into the big circle, i want to chang big div color to red, and red circle get fit to big div.

for these questions i wrote down these codes:

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

but these doesn't works, and i dunno how to make draggable fit to droppable.

ITSolution
  • 398
  • 2
  • 9
  • 21

1 Answers1

2

Append draggable to droppable to make things easier. I used .data() to store the element index (to remember where to put it back after being dropped).

Example:

$('#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)
   }
});

And put it back when dragged out:

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

You can then use CSS to style things your way:

#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;
}

The above CSS needs you to have position: relative on #BigSix and box-sizing:border-box on .Six

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

Jon Doe
  • 2,172
  • 1
  • 18
  • 35
MayThrow
  • 2,159
  • 4
  • 24
  • 38
  • Thank you for reply, it's absolutely what i want but one more thing, when i want to dragging out dropped div , it will jump to original position, any solution for make this softly? i mean, when we want to dragging out, it get back to default size and then revert to original position. – ITSolution Mar 18 '14 at 07:18
  • and another thing, it shouldn't accept another circle when one circle already dropped.any solution? – ITSolution Mar 18 '14 at 07:25