当前位置:首页>开发>正文

如何用Jquery实现多选后拖拽再排序,列表数据 jquery 通过拖动排序

2023-05-27 00:07:24 互联网 未知 开发

 如何用Jquery实现多选后拖拽再排序,列表数据 jquery 通过拖动排序

如何用Jquery实现多选后拖拽再排序,列表数据

jquery ui sortable没有这种能力,只能自己多加点代码就进行排序了。。比如,你定义一个数组,把多选的东西都放在数组里,然后进行排序。。不过具体怎么排,就看你的业务需求了。

jquery 通过拖动排序

例子没有。关于拖动的jquery插件很多~jquery ui就能实现~
如:

1

2

3


排序后为:
2

1

3

思路就是jquery each()函数获取id,一次写入字符串中(所得为‘2,1,3’),执行ajax请求,将字符串放入数组,key为id,value为序号,所得为:
array(
2 => 1,
1 => 2,
3 => 3
)
更新数据库即可。
随手打的,不知道对你是否有帮助。

网页中如何用jquery中draggable实现拖拽Demo

在jquery里可以直接用isNaN(),因为他是JavaScript的类库。是由JavaScript语言写的。
例如:

$(document).ready(function(){
alert(isNaN($(#id).val()))
}) 
</script>可以直接使用

jquery ui draggable拖拽元素

jqueryUI的拖拽提供了三个事件。开始拖动前,拖动中,拖动放下。

你所说的 "当两个div有重叠的部分,拖拽的div就还原会原来的位置",任何一个框架都不会帮你实现。因为这个要求的位置太精确了。任何框架都不可能帮你实现。因为拖动对象的尺寸边框,都是未知的。无规矩可寻。目前的拖动事件,鼠标事件。浏览器实现的机制都是以鼠标位置为判断的。而如果你要实现的话,你需要:1 个容器。 2 精确计算每个被拖动div的尺寸和当前鼠标相对于容器的坐标。 3  拖动中事件不断的进行位置判断。即在drag事件中判断。

比如:

    


 

假设你现在拖动div2,你想要实现,当拖动过程中。div2碰到div1的时候。就让div2回到原来的位置。

那么最关键的一点是。你在drag事件中必须要不断的计算,div2位置是否和div1位置重合。

计算是否重合的思路就是:将尺寸对比,转化成二维坐标对比。计算出div1的初始静态坐标。

根据鼠标当前相对于容器的坐标和div2的尺寸,计算出div2四个边缘的动态坐标。再和div1的坐标对比。