javascript - 使可拖动项目在放入可放置容器时逐渐消失

Question

我有四个可拖动元素和一个可放置区域，目前看起来像 this (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>