Vue.Draggable
Vue.Draggable copied to clipboard
Footer becomes sortable when used in a grid
When using Vue.Draggable for sorting Bootstrap columns, the footer seems to become sortable while you're dragging between lines. When dragging ends, footer moves to where it has to be. Is this a bug?
I tried "horizontal" and "vertical" values for "direction" option but it behaves in same way.
Jsfiddle link
https://jsfiddle.net/fe7thkro/2/
Step by step scenario
- Import Bootstrap css.
- Design a grid which spans multiple lines.
- Make your grid items sortable.
- Add a footer template for your sortable, which is another column as well
- Try dragging an item downwards, to a position beside footer
Actual Solution
Position of the footer changes as well.
Expected Solution
Footer should remain still.
I ran into this as well, but just found the answer in the documentation:
Important: it should be used in conjunction with draggable option to tag draggable element.
I have the same issue and i am using the draggable option. It is also used in the fiddle of @fonemi
I was able to fix this by specifying CSS order: 1 on the footer element.
我是拖拽判断监听move事件,如果当前位置不在触发的接收元素上面,return false, 自测没发生把footer替换
Translation of @xguol comment for those interested :
I am dragging and dropping to determine whether to listen to the move event and return false if the current position is not on top of the receiving element that triggered it, and replace the footer if this does not happen.