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
45
46
47
48
49
50
51
52
53
54
| <div class="rel" id="example3reference1">
| <p class="bold">Drag me</p>
| <p class="thin">on the edges</p>
| </div>
|
| <div class="popper" id="example3popper1">
| <p class="bold">Flipping popper</p>
| <p class="thin">which never flips to right</p>
| <div class="popper__arrow" x-arrow></div>
| </div>
|
| <script>
| document.addEventListener('DOMContentLoaded', function(){
| var example3popper1inst = new Popper(example3reference1, example3popper1, {
| placement: 'left',
| modifiers: {
| flip: {
| behavior: ['left', 'bottom', 'top'],
| },
| preventOverflow: {
| boundariesElement: example3reference1.parentNode,
| },
| }
| });
| interact('#example3reference1').draggable({
| restrict: {
| restriction: "parent",
| endOnly: true,
| elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
| },
| onmove: dragMoveListener
| });
| var x = 0, y = 0;
| function dragMoveListener (event) {
| target = event.target,
| // keep the dragged position in the data-x/data-y attributes
| x += event.dx,
| y += event.dy;
|
| // translate the element
| target.style.top = y + 'px';
| target.style.left = x + 'px'
|
| example3popper1inst.update();
| }
|
| }, false);
| </script>
|
| <style>
| #example3reference1:hover {
| background: rgba(255,255,255,0.2);
| }
| </style>
|
|
