2012-02-22 5 views
13

aquí es una pregunta simple. Tengo un 'ul' que he hecho ordenable a través de la función sortable() de jquery-ui. Quiero eliminar elementos cuando se eliminan de la lista. La forma en que lo implementé funciona en el sentido de que cuando arrastro un elemento fuera de la lista, se elimina, pero también se elimina cuando simplemente reorganizo la lista. ¿Cómo logro el comportamiento que estoy buscando sin este comportamiento involuntario? Debajo está todo el código:¿Cómo eliminar un artículo que se aleja de su lista?

<html> 
<head> 
    <link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script> 

    <script type="text/javascript"> 
    $(function(){ 
     $('#sortme').sortable({ 
      out: function(event, ui){ 
       ui.item.remove(); 
      } 
     }); 
     $('#sortme').disableSelection(); 
    }); 
    </script> 

    <style> 
    li{ 
     list-style-type: none; 
     width: 200px; 
     height: 50px; 
     border: 1px solid #000; 
     text-align: center; 
     box-sizing: border-box; 
     padding-top: 15px; 
    } 
    </style> 
    <title> jqui sort test </title> 

</head> 
<body> 
    <ul id='sortme'> 
     <li>0</li> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
    </ul> 
</body> 
</html> 

¡Gracias por su ayuda!

Respuesta

25

Puede intentar usar una variable para verificar si los elementos que está arrastrando se arrastran fuera de su contenedor primario.

Puede utilizar el sobre y fuera eventos de la interfaz de usuario jQuery se pueden ordenar para asignar el valor de esta variable y luego ejecutar la eliminación del elemento arrastrado en el casobeforeStop.

aquí es una demostración de lo que he llegado con: http://jsfiddle.net/drewP/m7VJq/1/

que me haga saber si funciona para usted.

+0

Me olvidé de over/out. Gracias Drew! :-D – Fallenreaper

+0

¡Esto fue malditamente brillante! ¡Salvó el día Drew! :) – cbloss793

0

Estoy seguro de que hay más de una forma correcta de hacerlo, pero si tuviera que hacerlo, probablemente usaría un elemento de envoltura como droppable. ¿Por qué no el contenedor principal del sitio, el todopoderoso #wrapper! Enlace al evento drop del droppable y elimine el elemento por completo. No se quedará en orden tampoco.

Cuestiones relacionadas