当将可拖动的项目放到可放置的容器上时使它们消失

Question

我目前有四个可拖动元素和一个可放置区域（小提琴） ，我想通过添加以下功能来改善体验：

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>