资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vuedraggable插件怎么在vue中使用

vuedraggable插件怎么在vue中使用?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

为乐昌等地区用户提供了全套网页设计制作服务,及乐昌网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、乐昌网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

首先在vue项目中,用npm包下载下来

npm install vuedraggable -S

下载下来后,引入插件,在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

别忘了下面要注册组件

components: {
  draggable
},

然后就可以在template标签里面使用了


      
        
          {{element.text}}
        
        

下面贴一下详细用法






  .test{
    border:1px solid #ccc;
  }
  .drag-item{
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: auto;
    position: relative;
    background: #ddd;
    margin-top:20px;
  }
  .ghostClass{
    opacity: 1;
  }
  .bottom{
    width: 200px;
    height: 50px;
    position: relative;
    background: blue;
    top:2px;
    left: 2px;
    transition: all .5s linear;
  }

下面是结果

vuedraggable插件怎么在vue中使用

上下是可以拖动的,只是截图的话看不出效果来,小伙伴们注意了,里面有个options选项,这个选项怎么来的呢,据我观察这个插件是基于sortable.js,所以这个options里面的配置,和sortable.js是一样的,下面我贴两个地址,一个是vuedraggable的GitHub地址,一个是sortable.js的GitHub地址

vuedraggable: 学习地址 

sortable.js:学习地址

options配置如下

var sortable = new Sortable(el, {
  group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
  sort: true, // sorting inside list
  delay: 0, // time in milliseconds to define when the sorting should start
  touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
  disabled: false, // Disables the sortable if set to true.
  store: null, // @see Store
  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".my-handle", // Drag handle selector within list items
  filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
  preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
  draggable: ".item", // Specifies which items inside the element should be draggable
  ghostClass: "sortable-ghost", // Class name for the drop placeholder
  chosenClass: "sortable-chosen", // Class name for the chosen item
  dragClass: "sortable-drag", // Class name for the dragging item
  dataIdAttr: 'data-id',

  forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

  fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
  fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
  fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

  scroll: true, // or HTMLElement
  scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
  scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  scrollSpeed: 10, // px

  setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
    dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
  },

  // Element is chosen
  onChoose: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },

  // Element dragging started
  onStart: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },

  // Element dragging ended
  onEnd: function (/**Event*/evt) {
    var itemEl = evt.item; // dragged HTMLElement
    evt.to;  // target list
    evt.from; // previous list
    evt.oldIndex; // element's old index within old parent
    evt.newIndex; // element's new index within new parent
  },

  // Element is dropped into the list from another list
  onAdd: function (/**Event*/evt) {
    // same properties as onEnd
  },

  // Changed sorting within list
  onUpdate: function (/**Event*/evt) {
    // same properties as onEnd
  },

  // Called by any change to the list (add / update / remove)
  onSort: function (/**Event*/evt) {
    // same properties as onEnd
  },

  // Element is removed from the list into another list
  onRemove: function (/**Event*/evt) {
    // same properties as onEnd
  },

  // Attempt to drag a filtered element
  onFilter: function (/**Event*/evt) {
    var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
  },

  // Event when you move an item in the list or between lists
  onMove: function (/**Event*/evt, /**Event*/originalEvent) {
    // Example: http://jsbin.com/tuyafe/1/edit?js,output
    evt.dragged; // dragged HTMLElement
    evt.draggedRect; // TextRectangle {left, top, right и bottom}
    evt.related; // HTMLElement on which have guided
    evt.relatedRect; // TextRectangle
    originalEvent.clientY; // mouse position
    // return false; — for cancel
  },

  // Called when creating a clone of element
  onClone: function (/**Event*/evt) {
    var origEl = evt.item;
    var cloneEl = evt.clone;
  }
});

关于vuedraggable插件怎么在vue中使用问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


当前名称:vuedraggable插件怎么在vue中使用
路径分享:http://cdkjz.cn/article/posogd.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220