实战匠坊

html代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop Example</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <style>
        .draggable {
            width: 150px;
            height: 150px;
            background-color: #29e;
            color: white;
            text-align: center;
            line-height: 150px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="dragBox" class="draggable">拖拽我</div>

<script>
    interact('.draggable').draggable({
        onmove: dragMoveListener,
    });

    function dragMoveListener (event) {
        var target = event.target,
            x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
            y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
    }

    window.dragMoveListener = dragMoveListener;
</script>
</body>
</html>

python

import streamlit as st

# 标题
st.title("拖拽示例")

# 使用 components.html 嵌入 HTML 文件
with open("drag_drop.html", "r", encoding="utf-8") as f:
    html_content = f.read()

st.components.v1.html(html_content, height=400)