Заставьте перетаскиваемый предмет исчезнуть при падении на предмет падения

Question

У меня есть четыре перетаскиваемых элемента и область перетаскивания, в настоящее время выглядящая так (Fiddle), и я хотел бы улучшить впечатление, добавив следующие функции:

1) при запуске: отобразить альтернативный элемент, как только он выйдет из исходного положения.

2) при падении: перетаскиваемый элемент исчезает при падении на бросаемый контейнер (например, ".frame").

Каков наилучший способ сделать это?

Спасибо, любая помощь будет принята с благодарностью!

$(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/> элементы теперь являются тенями их содержащихся перетаскиваемых div элементы и измененные стили, чтобы перекрывать их
2. JQuery .hide() используется, чтобы удалить их при перетаскивании завершено

Я также сильно упростил JS. По сути, у вас есть ссылка на элемент все время, поэтому вам не нужно совпадать по ID или искать его.

CSS мог бы использовать некоторую любовь, поскольку я не потратил слишком много времени на это. Ширина меньше, чем в вашем образце.

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>