jQuery ui sortable – сохранить в базу данных с помощью Python / Flask / SQLite

Мне нужен эффект перетаскивания, просто найти jQuery для сортировки наиболее жизнеспособного и простого решения, но я бы хотел сохранить позиции после переупорядочения. Используя php / sqlite, я могу это сделать, но поскольку я использую флягу фрейма, решение должно быть в python. Я пришел к этому поисковому коду

HTML:

$(function() { var $sortables = $("#sortMe").sortable({ stop: function() { var sortedItems = $sortables.sortable("toArray"); } }); }); 

ру:

 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite' class Sortable(db.Model): __tablename__ = 'sortables' id = db.Column(db.Integer, primary_key=True, autoincrement=True) data = db.Column(db.String) def __init__(self, data): self.data = data @app.route("/saveorder", methods=['GET', 'POST']) def save_order(): if request.method == "POST": 

редактировать.

теперь, я получил это

HTML:

  $(function() { $('#sortMe').sortable({ update: function(event, ui) { var postData = $(this).sortable('serialize'); console.log(postData); $.ajax({ url: '/saveorder', type: 'POST', contentType: 'application/json', dataType: 'json', data: JSON.stringify({list: postData}), success: function (ret) { alert('JSON posted: ' + JSON.stringify(ret)); } }); } }); }); 

ру:

 @app.route("/saveorder", methods=['GET', 'POST']) def saveorder(): json = request.json print(json) return jsonify(json) 

я нашел сольвацию

https://github.com/h01000110/sortable-flask

app.py

 from flask import Flask, render_template, request, jsonify from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True db = SQLAlchemy(app) class Sortable(db.Model): __tablename__ = 'sortables' id = db.Column(db.Integer, primary_key=True, autoincrement=True) data = db.Column(db.String) def __init__(self, data): self.data = data db.create_all() @app.route('/') def index(): sort = Sortable.query.filter_by(id=1).first() ordem = str(sort.data) return render_template('index.html', sort=sort, ordem=ordem) @app.route('/post', methods=['GET', 'POST']) def post(): json = request.json x = json.replace('item[]=', ',') y = x.replace('&,', '') final = y.replace(',', '') sort = Sortable.query.filter_by(id=1).first() sort.data = final db.session.commit() return jsonify(final) if __name__ == '__main__': app.run(debug=True) 

index.html

 <html> <head> <title>Flask example</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function(){ $('#sortMe').sortable({ update: function(event, ui) { var postData = $(this).sortable('serialize'); $.ajax({ type: 'POST', contentType: 'application/json', data: JSON.stringify(postData), dataType: 'json', url: '/post' }); } }); }); </script> </head> <body> <ul id="sortMe"> {% for i in ordem %} <li id="item_{{ i }}">item {{ i }}</li> {% endfor %} </ul> </body> </html>