当拖放到可放置容器上时，使可拖动项目消失

Question

我有四个可拖动元素和一个可放置区域，目前看起来像this (Fiddle)，我想通过添加以下功能来改善体验：

1) 开始时：当一个替代元素离开其初始位置时立即显示它。

2) on drop：可拖动元素在被拖放到可放置容器（例如“.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>