element ui 和jquery-ui Sortable相结合实现组件可拖拽排序

实现一个可拖拽排序的多选框,使用jquery-ui sortable实现拖拽排序,使用element ui实现多选框。效果如下:

element ui 和jquery-ui Sortable相结合实现组件可拖拽排序_第1张图片

代码实现:

 
      
data () {
    return {
        checkList: ['Group A','Group B','Group C']
      }
    },
mounted () {
    this.controlPlane();
  },
 methods:{
    controlPlane(){
      $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
      });
      $( "#sortable" ).disableSelection();

    },
    ...
    }

总结:将element ui选项框嵌入到jquery-ui中的排序列表。

你可能感兴趣的:(Web前端,vue.js,jquery,前端)