Make the draggable item fade away when dropped onto droppable contianer

Question

I have four draggable elements and a droppable area currently looking like this (Fiddle) and I would like to improve the experience by adding the following functions:

1) on start: display an alternative element as soon as it is out of its initial position.

2) on drop: draggable element fade away when it is dropped onto droppable container (e.g. ".frame").

What is the best way to do this?

Thanks, any help would be greatly appreciated!

$(document).ready(function() {
  $("[id*=draggable]").draggable({
    containment: "#area51",
    revert: true,
    stack: ".frame_type"
  });
  $(".frame").droppable({
    hoverClass: "ui-state-active",

    drop: function(event, ui) {
      var currentId = $(ui.draggable).attr('id');

      if (currentId == "draggable-1") {
        $(this).css('background-color', '#f1c40f');
      } else if (currentId == "draggable-2") {
        $(this).css('background-color', '#e74c3c');
      } else if (currentId == "draggable-3") {
        $(this).css('background-color', '#3498db');
      } else if (currentId == "draggable-4") {
        $(this).css('background-color', '#9b59b6');
      }
    }

  });
});

<div class="container-fluid text-center">
  <div class="row" id="area51">
    <div class="col-xs-8">
      <div class="showroom">
        <div class="frame">
          <img class="display" src="http://placehold.it/200" />
        </div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="selection text-center">
        <ul class="list-unstyled">
          <li id="draggable-1" class="frame_type color-1"></li>
          <li id="draggable-2" class="frame_type color-2"></li>
          <li id="draggable-3" class="frame_type color-3"></li>
          <li id="draggable-4" class="frame_type color-4"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

1. <li/> elements are now shadows of their containing draggable div elements and tweaked styles to overlap them
2. jQuery .hide() is used to remove them on drag complete

I've also simplified the JS a lot. Basically you have a reference to the element all the time, so don't need to match on ID or search for it.

The CSS could use some love as I haven't spent too long on it. The widths are smaller than in your sample.

http://jsfiddle.net/pratik136/L3abroyy/10/

$(document).ready(function() {
  $("[id*=draggable]").draggable({
    containment: "#area51",
    revert: true,
    stack: ".frame_type"
  });
  $(".frame").droppable({
    hoverClass: "ui-state-active",

    drop: function(event, ui) {
      var elem = ui.draggable;
      $(this).css('background-color', elem.css('background-color'));
      $(elem.parent()).hide('slow');
    }

  });
});

/* General Styles */

* {
  box-sizing: border-box;
}
html,
body {
  background-color: #eee;
  color: #666;
}
.showroom {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  height: 500px;
  padding: 100px;
}
.frame {
  background-color: #fff;
  height: 300px;
  width: 300px;
  padding: 50px;
  border-radius: 5px;
}
.display {
  border-radius: 5px;
  height: 200px;
  width: 200px;
  background-color: #fff;
}
.selection {
  border-radius: 5px;
  height: 500px;
}
.frame_type {
  height: 50px;
  width: 100%;
  border-radius: 5px;
}
li {
  height: 50px;
  width: 30%;
  border-radius: 5px;
}
.color-1,
.color-1 div {
  background-color: #f1c40f;
}
.color-2,
.color-2 div {
  background-color: #e74c3c;
}
.color-3,
.color-3 div {
  background-color: #3498db;
}
.color-4,
.color-4 div {
  background-color: #9b59b6;
}
.ui-state-active {
  background-color: #e1e1e1 !important;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container-fluid text-center">
  <h1>Paintings & Frames: Interactive App</h1>

  <div class="row" id="area51">
    <div class="col-xs-8">
      <div class="showroom">
        <div class="frame">
          <img class="display" src="http://placehold.it/200" />
        </div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="selection text-center">
        <h3>Draggable Frames</h3>

        <ul class="list-unstyled">
          <li class="color-1">
            <div id="draggable-1" class="frame_type"></div>
          </li>
          <li class="color-2">
            <div id="draggable-2" class="frame_type"></div>
          </li>
          <li class="color-3">
            <div id="draggable-3" class="frame_type"></div>
          </li>
          <li class="color-4">
            <div id="draggable-4" class="frame_type"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>