Arrastável

Aviso：

Isto é um template usado internamente pela wiki das Backrooms Lusófonas. Por favor não toque nesta página sem permissão administrativa.

Como usar o script DraggableDiv:

- Crie um bloco html

- Coloque o seguinte código nele:

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="http://backrooms-wiki.wdfiles.com/local--files/component%3Adraggable/draggableDiv.js"></script>

- Crie um div que será o container para os outros divs moverem.

- Atribua a classe "draggable" ao div que quer arrastar por aí.

Protip

O div verde não pode ser movido para a esquerda ou direita porque ele tem um comprimento padrão de 100% ! Ele precisa ser modificado !

O código inteiro deste exemplo:

[[html]]

<style>
.block {
    width: 240px;
    min-height: 6.5em;
    margin: 1rem 0 0 1rem;
    background-color: pink;
    touch-action: none;
    user-select: none;
    transform: translate(0px, 0px);
    border: solid 2px;
    border-color: black;
    text-align: center;
}

.small {
width: max-content;
}

#drag_container {
background-color: yellow;
height: 500px;
}

</style>

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="http://backrooms-sandbox.wdfiles.com/local--files/draggable/draggableDiv.js"></script>

<div id="drag_container">
<div class="draggable block">
Eu posso ser arrastado por aí !
</div>
<div class="draggable small">
Eu também !
</div>
<div class="draggable" style="background-color: lightgreen;">
Eu não posso ser movido para a esquerda ou direita ?! <br> Por quê ? <br> Há truques em andamento.
</div>
</div>

[[/html]]

Autor(es)