可拖拽 div

注意:

此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

如何使用 DraggableDiv 的代码:

- 创建一个 HTML 代码块。
- 在其中输入以下代码:
<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>
- 创建一个 div 以容纳其他待加入的 div。
- 为你想要拖动的 div 添加 "draggable" 的 class 属性值。

小贴士

绿色 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="http://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]]
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License