Utilizo las herramientas de desarrollador de Google Chrome. Cuando quiero inspeccionar un elemento, generalmente hago clic con el botón derecho y selecciono "inspeccionar elemento". Esto no funciona para clones de ayudantes arrastrables. Mi código es el siguiente:Inspeccionar clon auxiliar
$myElement.draggable({helper: 'clone'});
¿Cómo puedo inspeccionar el clon ayudante que sólo se creará una vez que comience a arrastrar el elemento?
DOMNodeInserted
3. Cuando una jQuery UI arrastra con clon helper ocurre un nuevo elemento DOM insertado en el árbol DOM. Este elemento sería el último elemento antes de body etiqueta final. a continuación, la herramienta de desarrollador detiene el documento de la operación porque tiene un punto de interrupción para la inserción de un elemento DOM.
4. Ahora se puede inspeccionar el elemento clonado y editar el CSS o algo así ...
Nota: Parece que esos puntos de interrupción no funciona en Mac muy bien.
Inténtelo aquí: http://jsbin.com/ijacet/2
ACTUALIZACIÓN:
ya se puede romper en la inserción del nodo haciendo clic derecho sobre el elemento:
Hasta donde yo sé, no se puede. Puede (solo para fines de prueba) clonarlo explícitamente y anexarlo al documento. Entonces podrías inspeccionar el clon como cualquier otro elemento. Algo como esto sería probablemente lograr eso:
var tempElement = $myElement.clone();
tempElement.appendTo('body');
ahora, el clon debería aparecer en la parte inferior del cuerpo del documento, y usted debería ser capaz de seleccionar con el ratón en el modo de Inspector.
Dependiendo de lo que estás tratando de averiguar, esto puede o no darle suficiente información para extrapolar lo que crea automáticamente clon del arrastrable se vería así.
jQueryUI creará una copia exacta del elemento que se puede arrastrar. Por lo tanto, no es necesario que inspeccione el artículo que arrastra, pero puede inspeccionar el artículo que se está arrastrando.
El uso de la opción appendTo() en el que pueden arrastrarse incluso será capaz de definir una ubicación en la que se dará a la que pueden arrastrarse en. (http://jqueryui.com/demos/draggable/#option-appendTo)
Haciendo esto a mano (colocando el código allí a mano, en el contenedor que desee) puede inspeccionar el objeto real.
Simplemente arroje una excepción desde el interior de algún código que se desencadena mientras arrastra - esto matará el js que borra el elemento arrastrable cuando suelta el botón del mouse y congela el arrastrable donde estaba en la pantalla cuando ocurrió la excepción .
Entonces que son libres para inspeccionarlo a su contenido corazones :)
La manera más fácil es lanzar una excepción cuando se intenta colocar el elemento en una dropable, eso es lo que suele hacer él.
Wow. ¿Cómo hiciste el fondo negro como este? :) – Randomblue
Hay un archivo Custom.css que puede editarlo. Vaya a C: \ Users \ |||| NOMBRE DE USUARIO |||| \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ User StyleSheets y edítelo. O use este CSS que estoy usando: https://gist.github.com/1249280 – Mohsen
He hecho lo que dijo, pero la herramienta de desarrollador detiene el documento después de arrastrar ... – Randomblue