Tema: jQuery evitar duplicados en el drag y drop
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/07/2011, 07:01
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: jQuery evitar duplicados en el drag y drop
¿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
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <title>JSP Page</title>
  5.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  6.         <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
  7.     </head>
  8.     <script>
  9.     $( function(){
  10.         $( "#uno li" ).draggable({helper:"clone"});
  11.  
  12.         $( "#dos" ).droppable({
  13.             accept: "#uno li",
  14.             drop: function( event, ui ){
  15.                 dataIndex = ui.draggable.index();
  16.                 if ( !$(this).find("li[data-index="+dataIndex+"]").length ){
  17.                     $( this ).find( ".placeholder" ).remove();
  18.                     $( "<li data-index='"+ dataIndex +"'></li>" ).html( ui.draggable.text() + " - <a href='#'>x</a>" ).appendTo( this );
  19.                 }
  20.             }
  21.         });
  22.  
  23.         $('a', '#dos').live('click', function(){
  24.             $(this).parent().remove();
  25.         });
  26.  
  27.     });
  28.     </script>
  29.     <style>
  30.         ul{min-height:50px; width:50px; background:#ccc}
  31.     </style>
  32.     <body>
  33.  
  34.     <ul id="uno">
  35.         <li>Uno</li>
  36.         <li>Dos</li>
  37.         <li>Tres</li>
  38.     </ul>
  39.  
  40.     <ul id="dos">
  41.  
  42.     </ul>
  43.  
  44.     </body>
  45. </html>

sino mejor pasar los li de una lista a la otra