jQuery evitar duplicados en el drag y drop

Timak · #1 (**permalink**) 24/07/2011, 17:18

Hola.

Tengo una lista con la clase ui-draggable y arrastro un elemento a otra lista con la clase ui-droppable.

Mi duda es si hay alguna forma de evitar que un elemento se arrastre a la otra lista cuando ya existe dicho elemento en esa lista. Por ejemplo:

Código HTML:

Ver original<div id="div1">
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>uno</li>
</ul>
</div>
<div id="div2">
<ul>
</ul>
</div>

Arrastro el elemento "uno" a la otra lista. También arrastro el elemento "dos" a la otra lista. Pero si arrastro el otro elemento "uno" entonces no debe hacer el efecto droppable, pues ya existe el elemento "uno" en la otra lista.

¿Se podría hacer?

Muchísimas gracias por adelantado.

Saludos.

Dany_s · #2 (**permalink**) 25/07/2011, 07:01

¿algo así?
La lista #dos acepta solo li de #uno
en el drop creo un li y agrego un atributo data-index que tiene el valor de la posición de los li de #uno asi puedo comprobar antes de crearlo si ya existe, es lo que se me ocurrió.

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    </head>
    <script>
    $( function(){
        $( "#uno li" ).draggable({helper:"clone"});
 
        $( "#dos" ).droppable({
            accept: "#uno li",
            drop: function( event, ui ){
                dataIndex = ui.draggable.index();
                if ( !$(this).find("li[data-index="+dataIndex+"]").length ){
                    $( this ).find( ".placeholder" ).remove();
                    $( "<li data-index='"+ dataIndex +"'></li>" ).html( ui.draggable.text() + " - <a href='#'>x</a>" ).appendTo( this );
                }
            }
        });
 
        $('a', '#dos').live('click', function(){
            $(this).parent().remove();
        });
 
    });
    </script>
    <style>
        ul{min-height:50px; width:50px; background:#ccc}
    </style>
    <body>
 
    <ul id="uno">
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
    </ul>
 
    <ul id="dos">
 
    </ul>
 
    </body>
</html>

sino mejor pasar los li de una lista a la otra

Timak · #3 (**permalink**) 25/07/2011, 15:11

Hola Dany_s.

Muchas gracias por tu respuesta, la idea es muy buena, pero una duda: ¿en vez de dataIndex no se podría comprobar el contenido del li, es decir, si quiero arrastrar el li "dos" de la lista #uno, que compruebe en la lista #dos si existe el li "dos"?

Además de que si es posible preferiría evitar el crear un li y el appendTo.

Un saludo.

Dany_s · #4 (**permalink**) 25/07/2011, 15:16

si como quieras

¿por lo de "evitar el crear un li" te refieres a pasar un li al otro ul?

Timak · #5 (**permalink**) 25/07/2011, 15:26

Exacto, me refería a eso.

Y lo de comprobar el contenido del li supongo que es el innerHTML o algo así.

Saludos.

Dany_s · #6 (**permalink**) 26/07/2011, 06:33

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    </head>
    <script>
    $( function(){
        $( "#uno li" ).draggable({helper:'clone'});
 
        $( "#dos" ).droppable({
            accept: "#uno li",
            drop: function( event, ui ){
                $("#dos").append( ui.draggable );
            }
        });
    });
    </script>
    <style>
        ul{min-height:50px; width:50px; background:#ccc}
    </style>
    <body>
 
    <ul id="uno">
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
    </ul>
 
    <ul id="dos">
 
    </ul>
 
    </body>
</html>

Timak · #7 (**permalink**) 26/07/2011, 14:29

Bueno, en tu ejemplo lo que hace es mover el li a otro ul. Yo me refería más bien a copiar, pero siempre comprobando que no exista el elemento a copiar en el 2º ul, como en el ejemplo que hiciste con el index() y el appendTo, pero buscando otra forma de comprobar.