基于vue实现一个禅道主页拖拽效果

这里使用<代码> vuedraggable> 　　 　　 　　& lt; div类=安季秩萜鳌北? 　　& lt; !——左栏——比; 　　& lt; div类=白蟆北? 　　拖& lt; 　　v-bind=" dragOptions " 　　类="列表组" 　　:列出="项目" 　　比;//献г鼗蜃榧? 　　& lt;/draggable> 　　& lt;/div> 　　& lt; !——右栏——比; 　　& lt; div类=罢贰北? 　　拖& lt; 　　v-bind=" dragOptions " 　　类="列表组" 　　:列出="项目" 　　比;//献г鼗蜃榧? 　　& lt;/draggable> 　　& lt;/div> 　　& lt;/div> 　　& lt; script> 　　从“vuedraggable”;进口可拖动的 　　出口默认{ 　　拖组件:{}, 　　计算:{ 　　dragOptions () { 　　返回{ 　　动画:30, 　　处理:“.drag-handle”, 　　组:“描述”, 　　ghostClass:“鬼”, 　　chosenClass:“合适的”, 　　forceFallback:真 　　}; 　　} 　　} 　　}; 　　& lt;/script> 　　 　　

但是,和我想要的效果还是相差一点。

这块只需要配置相关的配置项就可以比较简单。左右拖动需要给拖拽容器指定相同的集团属性。指定标题元素拖动需要配置处理为可拖动元素的选择器名称。

下面简单介绍下常用的配置项:

　　<李>禁用:布尔定义是否此可分类的对象是否可用,为真时合适的对象不能拖放排序等功能,为假时为可以进行排序,相当于一个开关;李 　　<李>组:用处是为了设置可以拖放容器时使用,若两个容器该配置项相同,则可以相互拖动;李 　　<李>动画:数量单位:女士,定义排序动画的时间,李 　　<李>处理:选择格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动;李 　　<李>过滤器:选择格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用”、“分隔;李 　　<李>可拖动的:选择格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放李 　　<李> ghostClass:选择格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个类,我们可以通过这种方式来给影子元素进行编辑样式;李 　　<李> chosenClass:选择格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个类;李 　　<李> forceFallback:布尔如果设置为真时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等,李 　　<李> fallbackClass:字符串当forceFallback设置为真时,拖放过程中鼠标附着单元的样式;李 　　<李> 　　

采用相关配置如下: