Create Database Table
--
-- Table structure for table `dragdrop`
--
CREATE TABLE `dragdrop` (
`id` int(11) NOT NULL,
`text` varchar(255) DEFAULT NULL,
`listorder` int(11) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `dragdrop`
--
INSERT INTO `dragdrop` (`id`, `text`, `listorder`) VALUES
(1, 'Ajax', 3),
(2, 'Jquery', 5),
(3, 'PHP', 6),
(4, 'Mysqli', 7),
(5, 'Javascript', 1),
(6, 'Java', 4),
(7, 'Python', 2);
#app.py
from flask import Flask, render_template, request, jsonify
from flask_mysqldb import MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'testingdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)
@app.route('/')
def index():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.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():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
number_of_rows= cur.execute("SELECT * FROM dragdrop")
#print(number_of_rows)
getorder = request.form['order']
print(getorder)
order = getorder.split(",", number_of_rows)
count=0
for value in order:
count +=1
print(count)
cur.execute("UPDATE dragdrop SET listorder = %s WHERE id = %s ", [count, value])
mysql.connection.commit()
cur.close()
return jsonify('Successfully Updated')
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Flask Dynamic Drag and Drop Order List With jQuery Ajax and Mysql Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
<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>Python Flask Dynamic Drag and Drop Order List With jQuery Ajax and Mysql 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>
</body>
</html>
