2011-11-21 8 views
27

Tengo un montón de elementos. Algunos son arrastrables, algunos son desplegables y otros son ambos. ¿Cómo puedo detectar si un elemento se puede arrastrar o soltar?¿Cómo verificar si un elemento es droppable, se puede arrastrar u otro 'ble'?

+0

Por qué no puedes utilizar el selector original utilizaba cuando una instancia de '' droppable' o draggable'? – zzzzBov

+0

@zzzzBov, mi conrol se carga utilizando AJAX, por lo que no sé qué sucedió en el documento. –

+0

por favor muestra un código. No tengo idea de lo que estás hablando. Si está enviando algo de HTML a través de AJAX, ¿por qué importa si el elemento se puede arrastrar o arrastrar? – zzzzBov

Respuesta

25

También es posible usar los datos de jQuery() como este ..

if ($(elem).data('draggable')) { 
     alert("yes"); 
} 
else { 
     alert("no"); 
} 

if ($(elem).data('fooable')) { 
     alert("yes"); 
} 
else { 
     alert("no"); 
} 

Ver aquí: http://bootply.com/60153

+3

¡simplemente asegúrate de no escribir enunciados si/else sin llaves! – Mathletics

+0

Entonces jQuery registra todos sus '~ bles' en '.data'? –

+0

Sí, jQuery usa data() para muchas cosas internas - http://ejohn.org/apps/workshop/adv-talk/ - La comprobación de clase CSS también es viable, no estoy seguro de cuál sería mejor en su caso, o desde el punto de vista del rendimiento. – ZimSystem

5

Para los elementos que pueden arrastrarse:

$(elem).is('.ui-draggable') 

o usted podría filter, o simplemente seleccionar $('.ui-draggable');.

Para lanzables, utilizaría .ui-droppable, de tamaño variable es .ui-resizable, seleccionable es .ui-selectable para el contenedor a pesar de los elementos seleccionados son .ui-selectee, es clasificable .ui-sortable para el contenedor.

+0

¿Qué es mejor? ¿Comprobar o comprobar la clase Css en los 'datos'? ¿Y por qué? –

+0

Eso realmente depende de su implementación. Es muy fácil eliminar una clase, también es fácil eliminar algunos datos. Tengo la sensación de que esta pregunta es un síntoma de utilizar el enfoque equivocado. – zzzzBov

14

Esto funciona para mí con jQuery 1.10.2

if ($("el").data('uiDraggable')){ //or uiDroppable 
    alert("draggable") 
} else { 
    alert("not draggable") 
} 

Alternativamente, es posible invocar el método .data() sin argumento

$("el").data() 

Eso debe imprimir algo así como

Object {uiDraggable:.. $ (Función anónima) (función anónima)}

donde se pueden ver las propiedades del objeto.

0

utilizo Modernizr:

if (Modernizr.draganddrop) { 
// use drag and drop 
} 
Cuestiones relacionadas