Foros del Web - Ver Mensaje Individual - jQuery evitar duplicados en el drag y drop

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