对查找的结果进行拖拽调整顺序代码
时间: 2023-05-28 16:05:17 浏览: 49
这个问题比较复杂,因为需要涉及到前端的拖拽和后端的数据存储和查询。下面提供一个简单的思路:
1. 前端实现拖拽功能,拖拽时记录拖拽元素的位置和目标位置,并发送请求到后端,告诉后端需要将这个元素移动到哪个位置。
2. 后端接收到请求后,根据请求中的参数,修改数据库中对应的数据的位置信息。
3. 当用户下一次查询时,后端将按照位置信息重新排序查询结果,并返回给前端。
示例代码:
前端:
```javascript
// 获取拖拽元素
const draggables = document.querySelectorAll('.draggable');
// 获取目标元素
const containers = document.querySelectorAll('.container');
let dragItem = null;
// 给拖拽元素绑定拖拽事件
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
// 记录被拖拽元素和位置信息
dragItem = draggable;
dragItem.classList.add('dragging');
});
draggable.addEventListener('dragend', () => {
// 发送请求到后端
const newPosition = [...dragItem.parentNode.children].indexOf(dragItem);
const id = dragItem.dataset.id;
fetch(`/move?id=${id}&position=${newPosition}`)
.then(response => response.json())
.then(data => {
// 根据后端返回的数据重新渲染查询结果
renderResults(data);
})
.catch(error => console.error(error));
dragItem.classList.remove('dragging');
dragItem = null;
});
});
// 给目标元素绑定拖拽事件
containers.forEach(container => {
container.addEventListener('dragover', e => {
e.preventDefault();
const afterElement = getDragAfterElement(container, e.clientY);
const draggable = document.querySelector('.dragging');
if (afterElement == null) {
container.appendChild(draggable);
} else {
container.insertBefore(draggable, afterElement);
}
});
});
// 获取目标位置
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
```
后端:
```python
from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///example.db'
db = SQLAlchemy(app)
class Result(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80))
position = db.Column(db.Integer)
def __repr__(self):
return f'<Result {self.name}>'
# 查询结果
@app.route('/search')
def search():
results = Result.query.order_by(Result.position).all()
return jsonify([result.__dict__ for result in results])
# 移动元素
@app.route('/move')
def move():
id = int(request.args.get('id'))
position = int(request.args.get('position'))
result = Result.query.get(id)
result.position = position
db.session.commit()
results = Result.query.order_by(Result.position).all()
return jsonify([result.__dict__ for result in results])
if __name__ == '__main__':
app.run()
```