Сделать перетаскиваемые элементы HTML5 прокручивать страницу?

Я использую атрибут HTML5 draggable = "true" на некоторых моих div на моей веб-странице. Я хочу, чтобы при перетаскивании одного из этих элементов в нижнюю часть страницы он прокручивает страницу вниз, а когда вы перетаскиваете ее вверх, она прокручивает страницу вверх.Сделать перетаскиваемые элементы HTML5 прокручивать страницу?

В конечном итоге я создам плейлист на боковой панели, и поскольку он не всегда будет отображаться в зависимости от того, где вы смотрите на странице, страница должна прокручиваться при перетаскивании.

Моя страница here, и вы можете попробовать перетащить фотографии сообщений вокруг. В Chrome он автоматически позволяет прокручивать вниз, когда я перетаскиваю его в нижнюю часть, но не вверх. В Firefox он автоматически не позволяет мне прокручивать в любом направлении. Любая помощь?

Для этого вам понадобится простой jsfiddle. В Chrome вы сможете перетащить значок Google и прокрутить страницу вниз, но не подниматься вверх.

источник

2013-09-15 jas7457

хорошо вы могли бы сделать решение JavaScript/JQuery, но я буду ждать с его размещения, так как я хотел бы знать, есть ли какой-то другой способ – Breezer

@Breezer почему бы не позволить ОП решить, если ваш метод подходит ему? :) – wei2912

@ wei2912 заставляет вас думать, что любой, кто реализует перетаскиваемую функцию внутри окна, подумал бы об этом и сделал бы для этого решение. – Breezer

-5

Если вы хотите использовать dragable вы должны знать, что теперь HTML 5 особенность, его JQuery, поэтому проверить его здесь http://jqueryui.com/draggable/ ..

Используется как этот

$("#draggable").draggable();

http://jsfiddle.net/dFPVr/7/

источник

2013-09-15 06:54:11

Я знаю, что вы можете сделать это в jQuery, однако то, что я сказал, было правдой. Они добавили функцию перетаскивания в стандарты HTML5. См. Http://www.html5rocks.com/en/tutorials/dnd/basics/. Я не хочу это делать, используя jQuery, я хочу реализовать стандарт HTML5. – jas7457

Да, они добавили функцию перетаскивания, но вам нужно будет использовать JS для этого, если вы не хотите JQ, cuz scroll не доступен, пока вы перетаскиваете объект –

вот код, который будет прокручивать или прокручивать страницу, пока вы что-то перетаскиваете. Просто поместите объект перетаскивания вверху или внизу страницы. :)

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); 
     } 
    }

источник

2015-03-13 17:19:35 AngularPlayer

Привет и приветствую StackOverflow! Когда вы отвечаете на вопрос, часто бывает полезно включить какое-то объяснение в соответствие с ответом (а не только блочным кодом). Благодаря! – bwegs

Я изменил это для горизонтальной прокрутки внутри элемента контейнера ... изменил x на y, но не забудьте получить $ (element) .offset(). Left position как левый край. –

Этот ответ и связанные с ним upvotes немного запутывают. Событие перетаскивания не выставляет никаких координат, связанных с перетаскиванием, во время перетаскивания HTML5. Я не понимаю, как это может работать без этих данных ... – kamelkev

Я создал простой класс перетаскивания JavaScript. Он может автоматически прокручивать страницу вверх или вниз во время перетаскивания. См. Это jsfiddle. Также доступна на моей странице github. Перемещение с высокой скоростью не рекомендуется. Мне нужно это сделать.

Код, указанный ниже, является частью библиотеки.

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); 
       } 
      } 
     };

источник

2017-10-20 13:03:56

Сделать перетаскиваемые элементы HTML5 прокручивать страницу?

ответ

Смежные вопросы