Sélection d'une zone et/rectangle en javascript

J'ai besoin de sélectionner une région dans une page HTML5 via la souris.

Je suis ensuite aller à interagir avec les éléments à l'intérieur de cette région.

Il DOIT y avoir un moyen facile de le faire, mais je ne pouvais pas trouver quelque chose sur l'étagère..

Le jquery UI sélection ne fonctionne pas malheureusement, car il semble ne supporte qu'un seul élément parent.

Est-il quelque chose sur l'étagère pour dessiner un transparent div-dessus d'une région par une ligne pointillée?

Ou d'une mise en œuvre simple. Je pourrais sans doute passer une couple d'heures et bang quelque chose mais je suis surpris il n'y a rien qui me permet de le faire en 5 minutes.

  • ce que vous avez essayé? Code Postal
InformationsquelleAutor burtonator | 2014-04-25
  1. 25

    Semble assez simple...

    Créer un div qui est d'abord caché:

    <div id="div" hidden></div>

    Style:

    #div {
    border: 1px dotted #000;
    position: absolute;
}

    Et le JS:

    var div = document.getElementById('div'), x1 = 0, y1 = 0, x2 = 0, y2 = 0;
function reCalc() { //This will restyle the div
    var x3 = Math.min(x1,x2); //Smaller X
    var x4 = Math.max(x1,x2); //Larger X
    var y3 = Math.min(y1,y2); //Smaller Y
    var y4 = Math.max(y1,y2); //Larger Y
    div.style.left = x3 + 'px';
    div.style.top = y3 + 'px';
    div.style.width = x4 - x3 + 'px';
    div.style.height = y4 - y3 + 'px';
}
onmousedown = function(e) {
    div.hidden = 0; //Unhide the div
    x1 = e.clientX; //Set the initial X
    y1 = e.clientY; //Set the initial Y
    reCalc();
};
onmousemove = function(e) {
    x2 = e.clientX; //Update the current position X
    y2 = e.clientY; //Update the current position Y
    reCalc();
};
onmouseup = function(e) {
    div.hidden = 1; //Hide the div
};

    http://jsfiddle.net/jLqHv/

    • Est hidden vraiment un attribut booléen sur <div>s?
    • href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden" >Yup. Le violon œuvres, n'est-ce pas?
    • Je ne sais pas; jsFiddle n'a pas fonctionné pour moi pendant un certain temps. De toute façon, cool! hidden semble être un complément utile.
    • HTML5 définit l'attribut: developer.mozilla.org/en-US/docs/Web/HTML/...
    • grand qui fonctionne très bien
    • Je sais que ce sujet est un peu vieux mais je l'ai trouvé en cherchant la même chose, avez-vous une idée de comment je peux détecter des éléments d'entrée qui sont sous la zone sélectionnée ?
    • Vous pouvez faire une boucle à travers les entrées et utiliser les Element.getBoundingClientRect() avec quelques calculs pour trouver les éléments sélectionnés dans la liste rect.
    • Ok merci @bjb568
    • il doit être pageX et pageY sinon, après le défilement il l'habitude de travailler
    • Pas exactement ce que je cherchais, mais, ce qui me donne un moyen de faire ce que je voulais. Merci beaucoup pour la publication de cet extrait de code.
    • Il fonctionne bien, mais comment je suis sélectionné région code
    • C'est bon et je sais que son ancien poste, mais de toute façon à limiter la sélection dans un domaine donné? Pour ex. Je ne veux pas que l'utilisateur d'être en mesure de sélectionner à l'extérieur d'un <div>

    InformationsquelleAutor bjb568
  2. 3

    J'ai créé une bibliothèque pour exactement ce sujet:
    https://github.com/Simonwep/selection

    Il y a actuellement de bureau et portable /support tactile ainsi que la fonction de défilement automatique de la fonctionnalité comme vous le savez depuis votre explorateur de fichier 🙂

    InformationsquelleAutor Simon