install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2
CREATE TABLE dragdrop (
id serial PRIMARY KEY,
text VARCHAR ( 150 ) NOT NULL,
listorder INT NOT NULL
);
INSERT INTO
dragdrop(text,listorder)
VALUES
('Ajax', 3),
('Jquery', 5),
('PHP', 6),
('Mysqli', 7),
('Javascript', 1),
('Java', 4),
('Python', 2);
jqueryui sortable https://jqueryui.com/sortable/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | #app.pyfrom flask import Flask, render_template, request, jsonifyimport psycopg2 #pip install psycopg2 import psycopg2.extras app = Flask(__name__) app.secret_key = "caircocoders-ednalan" DB_HOST = "localhost"DB_NAME = "sampledb"DB_USER = "postgres"DB_PASS = "admin" conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST)@app.route('/')def index(): cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor) cur.execute("SELECT * FROM dragdrop ORDER BY listorder ASC") dragdrop = cur.fetchall() return render_template('index.html', dragdrop=dragdrop) @app.route("/updateList",methods=["POST","GET"])def updateList(): cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor) if request.method == 'POST': cur.execute("SELECT * FROM dragdrop") number_of_rows = cur.rowcount getorder = request.form['order'] print(getorder) order = getorder.split(",", number_of_rows) print(order) count=0 for value in order: count +=1 print(count) cur.execute("UPDATE dragdrop SET listorder = %s WHERE id = %s ", [count, value]) conn.commit() cur.close() return jsonify('Successfully Updated') if __name__ == "__main__": app.run(debug=True) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | //templates/index.html<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic Drag and Drop Order List With jQuery Ajax and Python Flask PostgreSQL Database</title><script type="text/javascript">$(document).ready(function(){ function slideout(){ setTimeout(function(){ $("#response").slideUp("slow", function () { }); }, 2000); } $("#response").hide(); $(function() { $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() { var item_order = new Array(); $('ul.reorder li').each(function() { item_order.push($(this).attr("id")); }); var order_string = 'order='+item_order; $.ajax({ method: "POST", url: "/updateList", data: order_string, cache: false, success: function(data){ $("#response").html(data); $("#response").slideDown('slow'); slideout(); } }); } }); }); }); </script></head><body><center> <p><h1>Dynamic Drag and Drop Order List With jQuery Ajax and Python Flask PostgreSQL Database</h1></p><div style="width:300px;"> <div id="list"> <div id="response"> </div> <ul class="reorder"> {% for row in dragdrop %} <li id="{{row.id}}">{{row.text}} <div class="clear"></div> </li> {% endfor %} </ul> </div></div></center><style>ul { padding:0px; margin: 0px;}#response { padding:10px; background-color:#9F9; border:2px solid #396; margin-bottom:20px;}#list li { margin: 0 0 3px; padding:8px;text-align:left; background-color:#00CCCC; color:#fff; list-style: none; border: #CCCCCC solid 1px;}</style></body></html> |
