Hello, how are you? You will see I am using jqueryUI, the Droppable function (which is used to drag elements). I'm following this tutorial from the same documentation Tutorial and I'm adapting it to my way here the code
//Coidgo Html Grupo de botones para ser arrastrados
<div class="group_alternative_button" id="alternative">
<ul class="group_drop_button">
<li>
<a href="#" class="btn_option btn_option_list">Control</a>
</li>
<li>
<a href="#" class="btn_option btn_option_list">Paz</a>
</li>
<li>
<a href="#" class="btn_option btn_option_list">Alegría</a>
</li>
</ul>
</div>
//Contenedor de los botones, es decir donde serán depositados
<div class="group_alternative_button" id="answer" style="height:100px">
</div>
Until hai the HTML structure now jquery
$(function(){
var $alternative = $("#alternative"),
$answer = $("#answer");
$("li",$alternative).draggable({
cancel: "a.btn_option_list",
revert: "invalid",
containment: "document",
helper: "clone",
cursor: "move"
});
$answer.droppable({
accept: "#alternative > ul > li",
drop: function (event,ui){
deleteAnswer(ui.draggable);
}
});
$alternative.droppable({
accept: "#answer ul li",
drop: function (event,ui){
recycleAnswer(ui.draggable);
}
});
function deleteAnswer($item){
$item.fadeOut(function(){
var $list = $("ul",$answer).length ?
$("ul",$answer) :
$("<ul class='group_drop_button'/>").appendTo($answer);
});
}
function recycleAnswer($item){
$item.fadeOut(function(){
$item
.appendTo($alternative)
.fadeIn();
});
}
});
The problem is when I release the items in the container that receives them disappear and I do not see them, something I must be doing wrong or I need something help please Thank you