Simple Javascript et faites glisser le contrôleur de curseur

Salut les Développeurs du monde entier.

Je voudrais avoir un peu d'aide avec un simple, pur Javascript (30 lignes), JQuery gratuit (et d'autres de la bibliothèque) faites glisser le contrôle de curseur.

J'ai été la recherche mois et a trouvé de nombreux scripts, mais je n'aime pas -Jquery cause de la plupart des script a besoin de 4, 5, 6 javascript comprend.. je préfère les petites et script de base.. j'aime juste comme je veux et je peux aussi maigre, beaucoup de petits scripts.

Tout ce que je besoin est un simple curseur que je peux utiliser pour: redimensionner les images, faites défiler la page, modifier la luminosité sur les images (avec PHP) etc.

Je suis de nouveau avec javascript (2 mois), c'est de savoir jusqu'où je suis maintenant.. Désolé pour la mauvaise noms de variable...

    <script type="text/javascript">  
      _item = null;
      mouse_x = 0;
      drag_x = 0; 
      function move_init() {
        document.onmousemove = _move;
        document.onmouseup = _stop;
      }
      function _stop(){
         _item = null;
      }
      function _move(e){
        mouse_x = document.all ? window.event.clientX : e.pageX;
        if(_item != null){
             _item.style.left = (mouse_x - drag_x) + "px";
        }
      }
      function _move_item(drag)
      {
        _item = drag;
        drag_x = mouse_x - _item.offsetLeft;
      }
move_init();
drag.onmousedown=_move_item();   //Agh.. did'nt figure out how this works
</script>

<style type="text/css">
#drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
#track{background:red; width:200px;}
</style>

<div id="track"><div id="drag" onmousedown="_move_item(this);" >x</div></div>

je le remercie de votre aide.

J'ai écrit cet au 31 décembre 2012.. Alors bonne et heureuse année. S'il vous plaît être bon pour l'autre.

Merci.

  • Salut, @user1938684, si vous êtes à la recherche pour une revue de code, merci de ce post sur codereview.stackexchange.com. Sinon, si vous avez une question ou un problème avec ce code, n'hésitez pas à dire exactement ce que c'est. Comme il est, on ne sait pas exactement quel type d'aide dont vous avez besoin.
  • Je serai heureux si quelqu'un a une pice de code pour moi.. Mon code n'est pas collé pour l'examen... de plus pour vérifier ce que je cherche. veuillez me donner un code.. alors je suis content et continuer mon développement.
  • Par curiosité, avez-vous trouvé un code? Je suis à la recherche de la même chose, toujours sans résultat.
  • Double Possible de Est-il un simple JavaScript slider?
InformationsquelleAutor Stone Pentecost | 2012-12-30
  1. 21

    Ce code fonctionne dans les navigateurs modernes. Il suffit de créer quelques polyfill pour que addEventListener et cette coutume curseur de plage sera sûr à utiliser:

    function rangeSlider(id, onDrag) {

    var range = document.getElementById(id),
        dragger = range.children[0],
        draggerWidth = 10, //width of your dragger
        down = false,
        rangeWidth, rangeLeft;

    dragger.style.width = draggerWidth + 'px';
    dragger.style.left = -draggerWidth + 'px';
    dragger.style.marginLeft = (draggerWidth / 2) + 'px';

    range.addEventListener("mousedown", function(e) {
        rangeWidth = this.offsetWidth;
        rangeLeft = this.offsetLeft;
        down = true;
        updateDragger(e);
        return false;
    });

    document.addEventListener("mousemove", function(e) {
        updateDragger(e);
    });

    document.addEventListener("mouseup", function() {
        down = false;
    });

    function updateDragger(e) {
        if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
            dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
            if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
        }
    }

}

    Exemple D'Utilisation

    <style>
.range-slider {
  width:300px;
  height:20px;
  margin:0 auto 1em;
  position:relative;
  cursor:e-resize;
}
.range-slider:before {
  content:"";
  display:block;
  position:absolute;
  top:9px;
  left:0;
  width:100%;
  height:2px;
  background-color:black;
}
.range-slider span {
  display:block;
  height:inherit;
  position:relative;
  z-index:2;
  background-color:red;
  cursor:inherit;
}
</style>

<div class="range-slider" id="range-slider-1">
  <span></span>
</div>

<script>
rangeSlider('range-slider-1', function(value) {
    document.getElementById('test-area').innerHTML = value + '%';
});
</script>

    Démo: http://jsbin.com/dulifezi/2/edit

    Mise à jour

    Je suis de la création d'une pension pour cet extrait ici → https://github.com/tovic/range-slider

    • Magnifique travail!!! Cela devrait être accepté.
    • Glisser semble ne pas fonctionner sur les appareils tactiles. Testé sur une tablette Android.
    • Le GitHub repo version prend en charge les événements tactiles.
    • Très sympa merci @TaufikNurrohman
    • aucune idée de la façon de déplacer ce code à tapuscrit (angulaire)?
    • Pas angulaire gars, désolé. Aucune idée.

    InformationsquelleAutor Taufik Nurrohman
  2. 2

    Prendre un coup d'oeil à DragDealer.js:
    https://skidding.github.io/dragdealer/

    Il y a un exemple de changer l'opacité d'une image basée sur la valeur d'un curseur ici.

    Espérons que cette aide!

    InformationsquelleAutor w3bshark