可排序的div,对子元素的顺序进行验证

时间:2013-03-05 15:24:40

标签: javascript jquery html css jquery-ui-sortable

考虑以下div结构


ELE 1 div div div ELE 2 div div ELE 3 div


我想按照我想要的顺序安排ELE n。 我发现我可以使用jQuery的sortable()函数。

但是,我还想做一些验证,并且只有在验证成功的情况下,被删除的div才能占据新位置。否则它应该恢复到原来的位置。

需要验证:

我想四处移动并安排ELE 1ELE 2ELE 3,但它只应在订单保持不变时才有效。

例如,如果在ELE 2之后的某个位置放置ELE 3,则应取消放置

有什么想法吗?

JSFiddle链接: http://jsfiddle.net/neekdamon/C9kUM/1/

1 个答案:

答案 0 :(得分:1)

这是一个非常自定义的验证。但我这样做的方法是向某些元素添加data-order属性。所以你可以按照原来的顺序。

当订单被更改时,您可以检查data-order属性是否仍然是正确的数字顺序。如果没有,请进行还原。

我举了一个我的意思的例子:

http://jsfiddle.net/C9kUM/2/

这就是你要找的东西吗?