55 lines
1.4 KiB
HTML
55 lines
1.4 KiB
HTML
|
<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>
|