WUED Fullpage

How to drag and move in fullpage.js v3 without any extensions. Preview

Getting Start

Import plugin in your html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>

Write the strut in html:

<div id="fullpage">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

Awesome coding:

new fullpage('#fullpage', {
  anchors: ['page1', 'page2', 'page3'],
  ...
});
// Added drag and move event for fullpage.js
document.querySelector('.fullpage-wrapper').addEventListener('mousedown', function(e) {
    fullpage_api.dragAndMove = e.clientY;
});
document.querySelector('.fullpage-wrapper').addEventListener('mouseup', function(e) {
    fullpage_api.dragAndMove > e.clientY ? fullpage_api.moveSectionDown() : fullpage_api.moveSectionUp();
});

License

MIT

Copyright (c) 2019-present, WUED