capture drag and drop item and send it to flask

Asked 20/11, 2018 at 21:43 Answered 8/5, 2023 at 8:16

I am working on application using flask python from the server side

So in the html side I have drag copy and past events which works very well

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);
}

Then this is the element I want to drag

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

And I dropped it here

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

My question is how do I send information to flask about the dragged item and the place where he was dropped. 3 days of searching and nada

Doublefaced answered 20/11, 2018 at 21:43 Comment(2)

No one to help here ? Is it that complicated .??? – Doublefaced 22/11, 2018 at 20:42

I'm also working on something similar and now planning to re-write the whole thing with Flask. What I did is; drag and drop items to let's say divA to divB; then select the content of divB with .innerHTML method in JS and save it to a JS variable. Like I said, I'm only considering to write thing in Flask, so I don't know how you can assign the value of a JS variable to a python variable; but that may work. If you ever managed to get it working, I'd appreciate if you can share the code. – Vaporescence 13/3, 2019 at 14:46

You can call functions from python in the HTML if you specify them; in 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)

and in 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>

drag and drop box from this website

Nutriment answered 8/5, 2023 at 8:16 Comment(0)

-1

Set ev.dataTransfer.setData("text", ev.target.id) for drag event and give the id to the element where you want to drop. Then get the id in drop event using event.target.id and also get the data using ev.dataTransfer.getData("text").
To send the information to flask make an Ajax call to Flask function with matching route.

Soundboard answered 26/7, 2021 at 16:37 Comment(0)

Recommended topics

Hot tags