使可拖動項目消逝時下降到可放開contianer

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>