Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/09/2016, 15:45
BlackJccl1
 
Fecha de Ingreso: abril-2015
Mensajes: 304
Antigüedad: 9 años, 1 mes
Puntos: 2
Usar Droppable con jquery Ui

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
  1. //Coidgo Html Grupo de botones para ser arrastrados
  2.    <div class="group_alternative_button" id="alternative">
  3.                         <ul class="group_drop_button">
  4.                             <li>
  5.                                 <a href="#" class="btn_option btn_option_list">Control</a>
  6.                             </li>
  7.                             <li>
  8.                                 <a href="#" class="btn_option btn_option_list">Paz</a>
  9.                             </li>
  10.                             <li>
  11.                                 <a href="#" class="btn_option btn_option_list">Alegría</a>
  12.                             </li>
  13.                         </ul>
  14.                     </div>
  15.  //Contenedor de los botones, es decir donde serán depositados
  16.       <div class="group_alternative_button" id="answer" style="height:100px">
  17.                     </div>
Hasta hai la estructura HTML ahora jquery
Código Javascript:
Ver original
  1. $(function(){
  2.     var $alternative = $("#alternative"),
  3.     $answer = $("#answer");
  4.  
  5.     $("li",$alternative).draggable({
  6.         cancel: "a.btn_option_list",
  7.         revert: "invalid",
  8.         containment: "document",
  9.         helper: "clone",
  10.         cursor: "move"
  11.     });        
  12.     $answer.droppable({
  13.         accept: "#alternative > ul > li",
  14.         drop: function (event,ui){
  15.             deleteAnswer(ui.draggable);
  16.         }
  17.     });
  18.     $alternative.droppable({
  19.         accept: "#answer ul li",
  20.         drop: function (event,ui){
  21.             recycleAnswer(ui.draggable);
  22.         }
  23.     });
  24.     function deleteAnswer($item){
  25.         $item.fadeOut(function(){
  26.             var $list = $("ul",$answer).length ?
  27.             $("ul",$answer) :
  28.                     $("<ul class='group_drop_button'/>").appendTo($answer);
  29.         });
  30.     }
  31.     function recycleAnswer($item){
  32.         $item.fadeOut(function(){
  33.             $item
  34.                     .appendTo($alternative)
  35.                     .fadeIn();
  36.         });
  37.     }
  38. });
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