FilesExpand file tree

 master

/

script.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

44 lines (39 loc) · 1.23 KB

 master

/

script.js

Copy path

Top

File metadata and controls

• Code
• Blame

44 lines (39 loc) · 1.23 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

const draggables = document.querySelectorAll('.draggable');

const containers = document.querySelectorAll('.container');

draggables.forEach(draggable => {

draggable.addEventListener('dragstart', () => {

draggable.classList.add('dragging');

});

draggable.addEventListener('dragend', () => {

draggable.classList.remove('dragging');

});

});

containers.forEach(container => {

container.addEventListener('dragover', e => {

e.preventDefault();

const afterElement = getDragAfterElement(container, e.clientY);

const draggable = document.querySelector('.dragging');

if (afterElement == null) {

container.appendChild(draggable);

} else {

container.insertBefore(draggable, afterElement);

}

});

});

function getDragAfterElement(container, y) {

const draggableElements = [

...container.querySelectorAll('.draggable:not(.dragging)')

];

return draggableElements.reduce(

(closest, child) => {

const box = child.getBoundingClientRect();

const offset = y - box.top - box.height / 2;

if (offset < 0 && offset > closest.offset) {

return { offset: offset, element: child };

} else {

return closest;

}

},

{ offset: Number.NEGATIVE_INFINITY }

).element;

}