jQuery Girl
  1. jQuery Girl
  3. javascript – elementFromPoint select bottom element
Intereting Posts
Comment savoir quand Google Places est chargé et prêt (de manière asynchrone)? Changer tr couleur de fond L’appel d’un fichier de barre de navigation provoque l’échec de la datation de mon jquery Passage d’une variable du backend au frontend dans une application Flask Javascript RegEx: heure de validation Confusion différée / promise et mise en œuvre Divs de hauteur égale (ou li) en rangées avec largeur et hauteur de fluide (fini à 90%) le filtrage jQuery a + non Comment écrire des données CSV dans un fichier JavaScript Commande JQuery «toujours active» Chart.js animé sur défilement Formater les champs de saisie avec des virgules et les afficher en Div sous forme de valeurs numériques comment mettre absolument un iframe au dessus sans cacher le corps Problème de redirection Javascript avec Google Chrome Déplacer des objects dans Ul Li de haut en bas

javascript – elementFromPoint select bottom element

Je travaille sur cette application glisser-déposer avec jquery / javascript, et je dois utiliser une balance des deux pour accomplir ce que je veux.

var drop = document.elementFromPoint($(this).offset().left, $(this).offset().top);

Ce que j’essaie de faire avec ce code ici est d’obtenir l’élément dans lequel mon object glissable tente d’être déposé (survole actuellement). Ceci, cependant, retournera toujours mon object glissable, par opposition à la cellule de table ( td ) située en dessous.

Puisque je sais que je recherche un élément td , existe-t-il un moyen de définir var drop comme suit:

var drop = document.elementFromPoint(x, y, 'td') ?

Ou y a-t-il une meilleure façon de s’y prendre?

Étant donné que document.elementFromPoint renvoie l’élément le plus haut, vous devez définir temporairement votre élément déplaçable à display:none ou pointer-events:none pour rechercher les éléments situés en dessous. J’ai créé un résumé ci-dessous qui renvoie la liste de tous les éléments à un moment donné.

essayer 

 var elementsArray = KoreSampl.atPoint(x,y,yourTableElement);

ou 

 var elementsArray = KoreSampl.fromEvent(dropEvent, yourTableElement);

puis 

 for(var i=0; i

En utilisant le résumé ci-dessous: https://gist.github.com/2166393 

 ;(function(){ //test for ie: turn on conditional comments var jscript/*@cc_on=@_jscript_version@*/; var styleProp = (jscript) ? "display" : "pointerEvents"; var KoreSampl = function() {}; KoreSampl.prototype.fromEvent = function(e, lastElement) { e = e || window.event; //IE for window.event return this.atPoint(e.clientX, e.clientY, lastElement); }; KoreSampl.prototype.atPoint = function(clientX, clientY, lastElement) { //support for child iframes var d = (lastElement) ? lastElement.ownerDocument : document; //the last element in the list lastElement = lastElement || d.getElementsByTagName("html")[0]; var element = d.elementFromPoint(clientX, clientY); if(element === lastElement || element.nodeName === "HTML") { return [element]; } else { var style= element.style[styleProp]; element.style[styleProp]="none"; //let us peak at the next layer var result = [element].concat(this.atPoint(clientX,clientY,lastElement)); element.style[styleProp]= style; //restore return result; } }; window["KoreSampl"] = new KoreSampl(); })();

Si vous pouvez vous passer d’anciens navigateurs, le CSS suivant fonctionnera:

Appliquez simplement cette règle à votre élément le plus élevé qui est déplacé. 

 #dragging { pointer-events: none; }