Problema con adición de evento

[GROGUI2]

Buenas, tnego el siguiente codigo que me añade eventos de drag & drop.

Todo funcionaba Ok, ahora he cambiado el nodo al que añado el evento, para que sea un hijo de ese nodo (simplemente le he aplicado la función

Código:

.find('.itemName').first()

LA consola de JAvaScript me dice que $nodoNombre.addEventListener is not a function, pero es que es exactamente iogual que lo que tenia, y antes si iba. El nodo al que lo añado existe, de hecho el resto de eventos (click, etc me siguen funcionando bien con el nuevo nodo).

Mi codigo:

ANTES

Código:

			// Manejadores drag & drop
			folder.addEventListener('dragover', enteringFolder, false);
			folder.addEventListener('drop', dropping, false);
			folder.addEventListener('dragleave', leavingFolder, false);

DESPUES

Código:

Código:

	
			var $nodoNombre = $(folder).find('.itemName').first();
			
			// Manejadores drag & drop
			$nodoNombre.addEventListener('dragover', enteringFolder, false);
			$nodoNombre.addEventListener('drop', dropping, false);
			$nodoNombre.addEventListener('dragleave', leavingFolder, false);
 

Qué puede estar pasando? GraciaS!

[Dradi7]

Primero debes verificar que te devuelve esta linea

$(folder).find('.itemName').first()

Si te esta devolviendo un objeto o no, en caso no fuera no podras asignar entonces el evento

Saludos

[GROGUI2]

Buenas,

sí, es un objeto. (Si hago alert me sale Object). De hecho, como digo, le estoy asignado eventos por medio de nodoNombre.click()... y esos sí que me funcionan...

Gracias

[Dradi7]

podrias poner la estructura del html para ver que esta obteniendo esta linea

[GROGUI2]

Si, es dinámico, pero más o menos se entiende:

Código HTML:

<li>
   <div " . $classAtt . " " . $allowedOptions . " " . $propId . ">". 
      "<div class='openclose2'>" . 
          $openButton . 
	  $closeButton . 
	  $loadingButton . 
	"</div> " . 
        "<div class='itemName'>" . $icon . " ". $name .  "</div>" .
    "</div>
</li>";

la variable "folder" contiene el div mas externo (dentro del li), y por tanto, al hacer el find sobre el itemName obtengo el nodo

Código HTML:

"<div class='itemName'>" . $icon . " ". $name .  "</div>"

, al cual le intento aplicar esos eventos que no funcionan, y los de click y dblclick, que son los que me funcionan.

[Dradi7]

Solo una consulta si ya estas usando el jQuery no te bastaría usar los eventos propios del jQuery podrias usar on revisando bien tu código esta linea

$(folder).find('.itemName').first()

te devuelve un objeto de tipo jQuery la cual no es compatible como un HTMLElement propio por lo tanto no reconoce el first en su caso usa on del jQuery

[GROGUI2]

En ese caso, llega hasta el manejador, el problema es que el parámetro que se le pasa a dicha función es diferente , verdad?

Ahora le estoy pasando el nodo sobre el que se ha generado el evento

Accedo a la variable .dataTransfer del parametro evt que recibia la función manejadora.

(Estoy arrastrando ficheros al navegador)

¿Cómo accedo ahora a los datos del evento para consultar esa propiedad?

Posiblemente lo haya hecho alguna vez pero no recuerdo.

Muchas gracias! :)

[GROGUI2]

O de otro modo, como convierto el nodo Jquery en un HTMLElement... cualquiera de las dos cosas me serviría, creo

[Dradi7]

Pero al agregar tanto la funcion con jQuery o por mismo JavaScript puedes obtener solo usando la variable e como argumento de la función function(event){}

[GROGUI2]

No entiendo muy bien lo que dices (y no se si me has entendido bien).

Digo que usando addEventListener, el parametro que recibe la funcion manejadora tiene definida la propiedad dataTransfer (Que son los ficheros que he arrastrado al nodo), mientras que si uso on de jQuery, el manejador no tiene esa propiedad en el parametro que recibe, y no se como acceder a ella.

Perdona si no he entendido bien esto ultimo que me has dicho. Gracias de nuevo, me estas ayudando poco a poco :)

[GROGUI2]

Lo logre!!!!!!!!! Vasta con usar [0] en lugar de first() en la seleccion del nodo!!

Muchas gracias, si no hubiera sido por ti no lo hubiera sacado :) Ahora te voto positivos :)

[Dradi7]

bueno como te dije podrias haberlo hecho de estas forma

En caso fuera con el addEventListener

Código Javascript:

$(folder).find('.itemName').first()[0].addEventListener
 

en el otro caso fuera jQuery

Código Javascript:

$(folder).find('.itemName').first().on({
   dragover: function(e){},
   drop: function(e){}
});
 

[GROGUI2]

SOlo sirve la primera, porque en la segunda, el parametro e de la función no tiene la propiedad "dataTransfer", supongo que habría alguna manera de conseguirla. Es que esto como es específico dle api del HTML5...

Muchas gracias, me ayudaste mucho.