Use Droppable with jquery Ui

0

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

    
asked by Jonathan Cunza 15.09.2016 в 20:28
source

1 answer

0

Well, finally my solution ends here

<div class="group_alternative_button" >
                        <ul class="group_drop_button" id="alternative">
                            <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>

Jquery a few small changes

$(function(){
    var $alternative = $("#alternative");
    var $answer = $("#answer");
    $("li",$alternative).draggable({
        cancel: "a.btn_option",
        revert: "invalid",
        containment: "document",
        helper: "clone",
        cursor: "move"
    });        
    $answer.droppable({
        accept: '#alternative > li',
        drop: function (event,ui){
            deleteAnswer(ui.draggable);
        }
    });
    $alternative.droppable({
        accept: "#answer li",
        drop: function (event,ui){
            recycleAnswer(ui.draggable);
        }
    });
    function deleteAnswer($item){
        $item.fadeOut(function(){
            var $list = $("ul",$answer).length ?
            $("ul",$answer) :
                    $("<ul class='group_rest_button'/>").appendTo($answer);
            $item.appendTo($list).fadeIn();
        });
    }
    function recycleAnswer($item){
        $item.fadeOut(function(){
            $item
                    .appendTo($alternative)
                    .fadeIn();
        });
    }
});

What happened was that I was not adding the element to the Html then it just disappeared with a good none display here for whoever is useful to you

    
answered by 16.09.2016 / 01:20
source