javascript - removeattribute - removeattr style jquery

Desplazar la página en arrastrar con jQuery

Question

He intentado usar kinetic.js y el código a continuación, sin embargo, cuando intento esto en IE11, sigue saltando a la cima cada vez que me desplazo:

$("html").kinetic();

Quiero hacer que la página se pueda desplazar en tabletas e IE10 y 11 para que los usuarios puedan simplemente empujar la página hacia arriba para desplazarse hacia abajo como lo haría en dispositivos móviles.

¿Cómo puedo hacer esto en pure-JS o jQuery sin que salte a la cima?

Answer 1

Basándose en la primera respuesta, este es el código para el desplazamiento horizontal al arrastrar el mouse:

var clicked = false, clickX;
$(document).on({
    ''mousemove'': function(e) {
        clicked && updateScrollPos(e);
    },
    ''mousedown'': function(e) {
        e.preventDefault();        
        clicked = true;
        clickX = e.pageX;
    },
    ''mouseup'': function() {
        clicked = false;
        $(''html'').css(''cursor'', ''auto'');
    }
});

var updateScrollPos = function(e) {
    $(''html'').css(''cursor'', ''grabbing'');
    $(window).scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}

Answer 2

Base en la idea de Rory McCrossan, implementada con AngularJS2.

import {Directive, ElementRef, OnDestroy, Input} from "@angular/core";

declare var jQuery: any;

@Directive({
    selector: ''[appDragScroll]''
})
export class DragScrollDirective implements OnDestroy {

    @Input() scrollVertical: boolean = true;
    @Input() scrollHorizontal: boolean = true;

    private dragging = false;
    private originalMousePositionX: number;
    private originalMousePositionY: number;
    private originalScrollLeft: number;
    private originalScrollTop: number;

    constructor(private nodeRef: ElementRef) {
        let self = this;

        jQuery(document).on({
            "mousemove": function (e) {
                self.dragging && self.updateScrollPos(e);
            },
            "mousedown": function (e) {
                self.originalMousePositionX = e.pageX;
                self.originalMousePositionY = e.pageY;
                self.originalScrollLeft = jQuery(self.nodeRef.nativeElement).scrollLeft();
                self.originalScrollTop = jQuery(self.nodeRef.nativeElement).scrollTop();
                self.dragging = true;
            },
            "mouseup": function (e) {
                jQuery(''html'').css(''cursor'', ''auto'');
                self.dragging = false;
            }
        });

    }

    ngOnDestroy(): void {
        jQuery(document).off("mousemove");
        jQuery(document).off("mousedown");
        jQuery(document).off("mouseup");
    }

    private updateScrollPos(e) {
        jQuery(''html'').css(''cursor'', this.getCursor());

        let $el = jQuery(this.nodeRef.nativeElement);
        if (this.scrollHorizontal) {
            $el.scrollLeft(this.originalScrollLeft + (this.originalMousePositionX - e.pageX));
        }
        if (this.scrollVertical) {
            $el.scrollTop(this.originalScrollTop + (this.originalMousePositionY - e.pageY));
        }
    }

    private getCursor() {
        if (this.scrollVertical && this.scrollHorizontal) return ''move'';
        if (this.scrollVertical) return ''row-resize'';
        if (this.scrollHorizontal) return ''col-resize'';
    }

}

Answer 3

Este código funcionará en el desplazamiento horizontal y vertical del mouse. Es bastante simple

var curYPos = 0,
    curXPos = 0,
    curDown = false;

window.addEventListener(''mousemove'', function(e){ 
  if(curDown === true){
    window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
  }
});

window.addEventListener(''mousedown'', function(e){ curDown = true; curYPos = e.pageY; curXPos = e.pageX; });
window.addEventListener(''mouseup'', function(e){ curDown = false; }); 

Answer 4

Puede hacer esto simplemente grabando la posición del mouse al hacer clic y la posición actual al ser arrastrado. Prueba esto:

var clicked = false, clickY;
$(document).on({
    ''mousemove'': function(e) {
        clicked && updateScrollPos(e);
    },
    ''mousedown'': function(e) {
        clicked = true;
        clickY = e.pageY;
    },
    ''mouseup'': function() {
        clicked = false;
        $(''html'').css(''cursor'', ''auto'');
    }
});

var updateScrollPos = function(e) {
    $(''html'').css(''cursor'', ''row-resize'');
    $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
}

Para evitar la selección de texto mientras arrastra, agregue el siguiente CSS:

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Ejemplo de violín

Actualizar

Aquí hay una versión de lo anterior como un complemento de jQuery, ampliado para permitir el desplazamiento tanto vertical como horizontal a través de la configuración. También le permite cambiar el cursor que se utiliza también.

(function($) {
  $.dragScroll = function(options) {
    var settings = $.extend({
      scrollVertical: true,
      scrollHorizontal: true,
      cursor: null
    }, options);

    var clicked = false,
      clickY, clickX;

    var getCursor = function() {
      if (settings.cursor) return settings.cursor;
      if (settings.scrollVertical && settings.scrollHorizontal) return ''move'';
      if (settings.scrollVertical) return ''row-resize'';
      if (settings.scrollHorizontal) return ''col-resize'';
    }

    var updateScrollPos = function(e, el) {
      $(''html'').css(''cursor'', getCursor());
      var $el = $(el);
      settings.scrollVertical && $el.scrollTop($el.scrollTop() + (clickY - e.pageY));
      settings.scrollHorizontal && $el.scrollLeft($el.scrollLeft() + (clickX - e.pageX));
    }

    $(document).on({
      ''mousemove'': function(e) {
        clicked && updateScrollPos(e, this);
      },
      ''mousedown'': function(e) {
        clicked = true;
        clickY = e.pageY;
        clickX = e.pageX;
      },
      ''mouseup'': function() {
        clicked = false;
        $(''html'').css(''cursor'', ''auto'');
      }
    });
  }
}(jQuery))

$.dragScroll();

/* Note: CSS is not relevant to the solution. 
   This is only needed for this demonstration */

body,
html {
  padding: 0;
  margin: 0;
}

div {
  height: 1000px;
  width: 2000px;
  border-bottom: 3px dashed #EEE;
  /* gradient is only to make the scroll movement more obvious */
  background: rgba(201, 2, 2, 1);
  background: -moz-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(201, 2, 2, 1)), color-stop(16%, rgba(204, 0, 204, 1)), color-stop(31%, rgba(94, 0, 201, 1)), color-stop(43%, rgba(0, 153, 199, 1)), color-stop(56%, rgba(0, 199, 119, 1)), color-stop(69%, rgba(136, 199, 0, 1)), color-stop(83%, rgba(199, 133, 0, 1)), color-stop(100%, rgba(107, 0, 0, 1)));
  background: -webkit-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
  background: -o-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
  background: -ms-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
  background: linear-gradient(-110deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=''#c90202'', endColorstr=''#6b0000'', GradientType=1);
  color: #EEE;
  padding: 20px;
  font-size: 2em;
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>First...</div>

<div>Second...</div>

Answer 5

Sólo me gusta añadir. Usando el código de Rory hice scrolling horizontal.

var clicked = false, base = 0;

$(''#someDiv'').on({
    mousemove: function(e) {
        clicked && function(xAxis) {
            var _this = $(this);
            if(base > xAxis) {
                base = xAxis;
                _this.css(''margin-left'', ''-=1px'');
            }
            if(base < xAxis) {
                base = xAxis;
                _this.css(''margin-left'', ''+=1px'');
            }
        }.call($(this), e.pageX);
    },
    mousedown: function(e) {
        clicked = true;
        base = e.pageX;
    },
    mouseup: function(e) {
        clicked = false;
        base = 0;
    }
});