HTML5 déplaçable éléments de défilement de la page?

Je suis en utilisant le HTML5, l'attribut draggable = "true" sur certains de mes divs sur ma page web. Je veux que lorsque vous faites glisser l'un de ces éléments vers le bas de la page, elle fait défiler la page vers le bas et lorsque vous la faites glisser vers le haut, il fait défiler la page vers le haut.

Je vais finir par faire une playlist sur ma barre latérale, et depuis il ne sera pas toujours à vue selon l'endroit où vous êtes à la recherche sur la page, la page doit défiler lorsque vous faites glisser la souris.

Ma page est ici et vous pouvez essayer de faire glisser les photos des posts autour de. Sur Chrome, automatiquement, il me permet de faire défiler vers le bas quand je fais glisser vers le bas, mais pas vers le haut. Sur Firefox, il n'est pas automatiquement permettez-moi de faire défiler une ou l'autre direction. Toute aide?

Ici est un simple jsfiddle pour obtenir vous avez commencé. Sur Chrome, vous devriez être capable de glisser sur l'icône Google et la faire défiler la page vers le bas, mais ne va pas jusqu'.

eh bien, vous pourriez faire un javascript/jquery solution mais je vais attendre avec le poster car je voudrais savoir si il y a une autre façon
pourquoi ne pas laisser les OP de décider si votre méthode lui convient? 🙂
cause vous pensez que quelqu'un la mise en œuvre d'un déplaçable fonction à l'intérieur d'une fenêtre aurait pensé cela et mis au point une solution pour elle.
avez-vous une bonne solution à l'aide de javascript ou jquery? J'aurais pensé que le browswers serait assez intelligent pour savoir pour le faire automatiquement cela, mais je ne crois pas...
vous pouvez utiliser l'écouteur d'événement qui est prévu dans le html5 documentation ensuite utiliser scrollTo avec pageY pour le faire défiler

OriginalL'auteur jas7457 | 2013-09-15

20

voici un code qui permettra de défilement vers le haut ou de défilement vers le bas de votre page quand vous tirez quelque chose. Simplement en plaçant votre glisser l'objet en haut ou en bas de la page. 🙂
```
    var stop = true;
    $(".draggable").on("drag", function (e) {

        stop = true;

        if (e.originalEvent.clientY < 150) {
            stop = false;
            scroll(-1)
        }

        if (e.originalEvent.clientY > ($(window).height() - 150)) {
            stop = false;
            scroll(1)
        }

    });

    $(".draggable").on("dragend", function (e) {
         stop = true;
    });

    var scroll = function (step) {
        var scrollY = $(window).scrollTop();
        $(window).scrollTop(scrollY + step);
        if (!stop) {
            setTimeout(function () { scroll(step) }, 20);
        }
    }
```
Salut et bienvenue à StackOverflow! Lorsque vous répondez à une question, il est souvent utile d'inclure une explication pour aller avec une réponse (par opposition à juste un bloc de code). Merci!
J'ai modifié cette défilement horizontal à l'intérieur d'un élément de conteneur... changer de x à y, mais assurez-vous d'obtenir l' $(element).offset().position la plus à gauche gauche de l'arête.
Cette réponse et associés upvotes est un peu déroutant. L'événement glisser n'expose pas de tout faire glisser liées coordonnées lors d'un HTML5 drag. Je ne comprends pas comment cela peut se faire sans que les données...
il ne fonctionne pas sur les appareils mobiles.

OriginalL'auteur AngularPlayer

J'ai fait un JavaScript simple glisser-déposer de la classe. Il peut automatiquement défiler vers le haut ou le bas de la page tout en faisant glisser.
Voir ce jsfiddle. Également disponible à mon github page.
Déplaçant à une vitesse élevée n'est pas recommandé maintenant. J'ai besoin de travailler.

Code ci-dessous est une partie de la bibliothèque.

var autoscroll = function (offset, poffset, parentNode) {
var xb = 0;
var yb = 0;
if (poffset.isBody == true) {
var scrollLeft = poffset.scrollLeft;
var scrollTop = poffset.scrollTop;
var scrollbarwidth = (document.documentElement.clientWidth - document.body.offsetWidth); //All
var scrollspeed = (offset.right + xb) - (poffset.right + scrollbarwidth);
if (scrollspeed > 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = offset.left - (xb);
if (scrollspeed < 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = (offset.bottom + yb) - (poffset.bottom);
if (scrollspeed > 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
scrollspeed = offset.top - (yb);
if (scrollspeed < 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
} else {
var scrollLeft = offset.scrollLeft;
var scrollTop = offset.scrollTop;
var scrollbarwidth = parentNode.offsetWidth - parentNode.clientWidth; //17
var scrollbarheight = parentNode.offsetHeight - parentNode.clientHeight; //17
var scrollspeed = (offset.right + xb) - (poffset.right - scrollbarwidth);
if (scrollspeed > 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = offset.left - (xb + poffset.left);
if (scrollspeed < 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = (offset.bottom + scrollbarheight + yb) - (poffset.bottom);
if (scrollspeed > 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
scrollspeed = offset.top - (yb + poffset.top);
if (scrollspeed < 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
}
};

OriginalL'auteur Joshy Francis

-7

Si vous souhaitez utiliser dragable vous devez savoir que c'est maintenant le HTML 5 de la fonctionnalité, sa jQuery, donc check it out ici http://jqueryui.com/draggable/..

Utilisé comme cela
```
$( "#draggable" ).draggable();
```
http://jsfiddle.net/dFPVr/7/

Je sais que vous pouvez le faire en jQuery, mais ce que j'ai dit était vrai aussi. Ils ont ajouté de glisser-déposer pour la spécification HTML5. Voir html5rocks.com/en/tutorials/dnd/basics. Je ne veux pas le faire à l'aide de jQuery, je veux mettre en œuvre la norme HTML5.
ouais ils ont ajouté fonctionnalité glisser-déplacer, mais vous aurez besoin d'utiliser JS pour que, si vous ne voulez pas JQ, cuz de défilement n'est pas disponible pendant que vous faites glisser l'objet

OriginalL'auteur Strahinja Djurić

Vous devez vous connecter pour publier un commentaire.