捕获拖放项目并将其发送到烧瓶

Question

我正在从服务器端使用 Flask python 处理应用程序

所以在 html 方面，我有拖动复制和过去的事件，效果很好

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    return ev.target.id
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = "newId"; /* We cannot use the same ID */
    ev.target.appendChild(nodeCopy);
}

那么这就是我要拖拽的元素

 <div class="row" id=1 draggable="true" ondragstart="drag(event)" >

我把它丢在这里

 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

我的问题是如何向烧瓶发送有关被拖动物品及其掉落地点的信息。3 天的搜索和 nada

Answer 1

设置ev.dataTransfer.setData("text", ev.target.id)拖动事件并将 id 指定给要放置的元素。然后使用 获取 drop 事件中的 idevent.target.id并使用 获取数据ev.dataTransfer.getData("text")。
要将信息发送到 Flask，请使用匹配的路由对 Flask 函数进行 Ajax 调用。