可拖拽 div
如何添加可拖拽 DIV：
- 创建一个 HTML 模块
- 放入下列代码：
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="https://backrooms-wiki.wdfiles.com/local--files/component%3Adraggable/draggableDiv.js"></script>- 创建一个 div 作为可拖拽 div 的容器
- 给可拖拽 div 添加 draggable 类
提示
绿色的 div 不能左右移动，因为它的默认宽度是 100%！需要手动调整！
这个例子的完整代码：
[[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="https://backrooms-sandbox.wdfiles.com/local--files/draggable/draggableDiv.js"></script>
<div id="drag_container">
<div class="draggable block">
我可以被拖动！
</div>
<div class="draggable small">
我也是！
</div>
<div class="draggable" style="background-color: lightgreen;">
我不能左右移动！？<br>为什么？<br>我被做局了
</div>
</div>
[[/html]]