我正在使用Vue.Draggable实现对表元素的拖放排序,表中的一些可拖动元素非常高(tbody
标签有很多行),所以我想在拖动时降低所谓的“ghost”元素的高度。
为了澄清,拖拽“ghost”元素是拖拽元素的副本,它在列表中真实的改变位置,在这个例子中是blue元素:https://sortablejs.github.io/Vue.Draggable/#/simple(我说的不是“拖动图像“:附着在鼠标光标上的拖动元素的副本)
我试过用CSS隐藏除第一行以外的所有表行:
.sortable-drag tr:not(:first-child) {
display: none;
}
但是这个库使用被拖动元素的高度来计算它相对于鼠标光标的位置,所以这使得拖动过程有缺陷并且不可预测。
Vue.Draggable构建在SortableJS上,它会触发许多事件,所以我想知道是否有一种方法可以在拖动开始时定制元素,如果Vue.Draggable/Sortable中没有我可以使用的一些选项的话。
1条答案
按热度按时间ykejflvf1#
上面的方法(用CSS隐藏除第一行之外的所有行)实际上如预期的那样工作,但不是没有一些额外的配置。我看到的“错误和不可预测”的行为来自Sortable JS中一个无关的特性:
可排序JS Wiki:
direction
选项Sortable将尝试自动检测默认情况下使用哪个方向,但最好您自己给予这个值。
一旦我指定表只应该垂直排序(通过在
Draggable
组件上设置direction="vertical"
属性),拖拽幽灵就开始按我希望的方式工作了。