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

时间:2018-11-20 21:43:53

标签: html flask drag

我正在从服务器端使用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天的搜索和搜索结果

1 个答案:

答案 0 :(得分:-1)

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