我正在使用服务器端的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
如果指定了函数，则可以在HTML中从python调用函数；在app.py中：
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def hello_world():
return render_template('html.html', dropped=dropped)
def dropped():
print('dropped!')
if __name__ == '__main__':
app.run(debug=True)
和在html.html中：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<script>function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
{{ dropped() }}
}</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">hi</p>
</body>
</html>
此网站的拖放框
为拖动事件设置ev.dataTransfer.setData("text", ev.target.id)为要放置的元素指定id。然后使用event.target.id获取drop事件中的id，并使用ev.dataTransfer.getData("text")获取数据
要将信息发送到flask，请使用匹配的路由对flask函数进行Ajax调用。