CSS有什么办法可以模仿JavaScript上的拖动事件吗？

Question

我一直在研究在CSS上模仿拖动事件的方法。但我什么也没找到。我想做的是创建一个类似于 Gmail 应用程序菜单的移动菜单，我可以通过拖动它来查看。有什么想法吗？在此先感谢您的帮助！！

Answer 1

是的，你可以！有一个例子：https://codepen.io/100ants/pen/zYOPNrV

<textarea name="" id="" cols="30" rows="10" readonly></textarea>
<div class="menu">
    Menu!
    <div class="handle"></div>
</div>

body, html {
    margin: 0;
    padding: 0;
}
textarea {
    height: 15px;
    resize: vertical;
    width: calc(50% + 9px);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-height: 118px;
    cursor: unset;
    min-height: 30px;
    opacity: 0;
}
.menu {
    background: #37474f;
    padding: 50px 20px;
    color: #fff;
    margin-top: -131px;
    position: relative;
    .handle {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 18px;
        height: 18px;
        background: #ffca28;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 5px solid #fff;
    }
}

CSS有什么办法可以模仿JavaScript上的拖动事件吗？

Is there any way to imitate the dragging event on JavaScript for CSS?

css

menu

responsive-design