“This is the 9th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

Vue.Draggable is a Vue drag plug-in based on sortable. js. Mobile device support, drag and drop and select text, intelligent scrolling, drag and drop between lists, no jQuery based, VUE 2 transition animation compatibility, undo support, all in all, a very good vue drag component. This article will show you how to set up the environment and simple examples, which are very simple to use and have no special CSS style requirements for dragged elements.

  • Document www.itxst.com/vue-draggab…

  • Code github.com/SortableJS/…

NPM or YARN installation mode

yarn add vuedraggable
npm i -S vuedraggable
Copy the code

Attributes that

If the following attribute description is not fully understood, please visit the non-vue version of sortable.js for a more detailed example.

The attribute name instructions
group :group= “name”, the same groups can be dragged from each other
sort :sort= “true”, whether to enable internal sort, if set to false, the group it belongs to cannot sort, other groups can drag sort
delay :delay= “0”, how long can drag after the mouse is pressed
touchStartThreshold How many pixels does it take to drag an element
disabled :disabled= “true”, whether to enable drag components
animation It’s still a cool, digital type of animation when you drag. For example, animation=1000 means 1-second transition animation effect
handle :handle=”. Mover “Can be dragged only when the mouse is moved over a mover element in the CSS
filter :filter=”. Unmover “Sets unmover style elements not to be dragged
draggable :draggable=”.item” Those elements can be dragged
ghostClass :ghostClass=”ghostClass” Sets the placeholder class name of the drag element, your custom style may need to add! Important takes effect and sets the forceFallback property to true
chosenClass :ghostClass=”hostClass” select the target style, your custom style may need to add! Important takes effect and sets the forceFallback property to true
dragClass :dragClass=”dragClass” drag element style, your custom style may need to add! Important takes effect and sets the forceFallback property to true
dataIdAttr dataIdAttr: ‘data-id’
forceFallback Default false, ignore HTML5 drag behavior, because there is a property in H5 that can be dragged, you want to customize ghostClass chosenClass dragClass style, recommend that forceFallback set to true
fallbackClass The default is false, the class name of the DOM element to clone
allbackOnBody By default false, the cloned element is added to the body of the document
fallbackTolerance Drag the px that should have been moved before
scroll Default is true, there is a scroll area whether to allow drag
scrollFn Scroll the callback function
scrollSensitivity How far away from the scroll area, scroll the scroll bar
scrollSpeed The scrolling speed

The event list

The name of the event instructions
start The event that is triggered when the drag begins
add An event that is triggered when you drag from one array to another
remove Remove event
update An event that is triggered when a drag changes position
end The event when the drag is complete
choose The event when the mouse click selects the element to drag
unchoose The event to release the mouse after it is selected
sort The event when the position changes
clone A drag from one array to another triggers different events than add. Clone copies array elements

Our needs

This section of the original document is not clear

  • You can drag from A to B
  • Data in area A is not deleted
  • Block A cannot be dragged to block A
  • The data in section A needs to be processed before it can be placed in section B

How do you do that, using custom controls

Vue. draggable Move Custom controls which elements can be dragged or not, and controls whether to allow docking

OnMove (e,originalEvent){console.log(e); console.log(originalEvent); //false prevents drag return true; }, /** e Object structure annotation draggedContext: the element to be dragged index: the number of the element to be dragged Element element: the object to be dragged futureIndex: the expected location, the destination location relatedContext: Index: serial number of the target docked object Element: corresponding object of the target element List: target array Component: VUE component object to dock **/Copy the code

Code A drags component configuration

<vuedraggable
          v-model="arr1"
          :move="onMove"
          :options="{ group: { name: 'site', pull: 'clone' }, sort: true }"
          animation="300"
          drag-class="dragClass"
          ghost-class="ghostClass"
          chosen-class="chosenClass"
          @add="onAdd"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div v-for="item in arr1" :key="item.id" class="item">
              <img
                style="margin-bottom: 20px"
                src="https://img3.bitautoimg.com/autoalbum/files/20190416/918/0333509185_6.png"
                width="100px"
              />
              {{ item.name }}
            </div>
          </transition-group>
        </vuedraggable>

Copy the code

B Drag component configuration

<vuedraggable
      v-model="arr2"
      group="site"
      animation="300"
      @add="onAdd"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group>
        <div v-for="item in arr2" :key="item.id" class="item">
          {{ item.name }}
        </div>
      </transition-group>
</vuedraggable>
Copy the code

methods

methods: OnMove (e, originalEvent, 'onMove') {console.log(e, originalEvent, 'onMove') Refused to drop the if (" e.r elatedContext. Element. IsConfig) return false / / drag objects / / if (e.d raggedContext. Element. IsConfig) return false return true } }Copy the code

And data data

  data() {
    return {
      arr1: [
        { id: 1, isConfig: true, name: 'www.itxst.com' },
        { id: 2, isConfig: true, name: 'www.jd.com' },
        { id: 3, isConfig: true, name: 'www.baidu.com' },
        { id: 4, isConfig: true, name: 'www.taobao.com' },
      ],
      arr2: [
        { id: 5, name: 'www.google.com' },
        { id: 6, name: 'www.msn.com' },
        { id: 7, name: 'www.ebay.com' },
        { id: 8, name: 'www.yahoo.com' },
      ],
    }
  },

Copy the code

PS: Precautions

  • {group: {name: ‘site’, pull: ‘clone’}, sort: true}”

In the command, name: site points to the group attribute of component B, indicating that the clone is transferred to component B but A is not deleted

  • In the move method e.ralatedContext. element represents the docked data object, that is, the element of B, e.draggedContext. Element is the element object being dragged. That’s the A element. And then we start processing A’s data