Hola como están? verán estoy usando jqueryUI, la función Droppable (Que sirve para arrastrar elementos). Estoy siguiendo este
tutorial de la misma documentación Tutorial y lo estoy adaptando a mi manera aquí el código
Código Javascript
:
Ver original//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>
Hasta hai la estructura HTML ahora jquery
Código Javascript
:
Ver original$(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();
});
}
});
El problema esta cuando suelto los elemento en el contenedor que los recibe desaparecen y no los veo, algo debo de estar haciendo mal o me falte algo ayuda por favor Gracias