Shulou(Shulou.com)05/31 Report--

This article mainly introduces vue how to drag pictures to sort Vue.Draggable related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this vue how to achieve drag pictures to sort Vue.Draggable articles will have a harvest, let's take a look at it.

Drag pictures to sort Vue.Draggable

I haven't been in touch with the vue project for a long time. I recently received a small project for vue image processing. One of the requirements is to sort images by dragging them.

Immediately after receiving this requirement, I immediately thought of Vue.Draggable, a vue drag-and-drop plug-in based on Sortable.js implementation.

The following is the implementation process

Step 1: install Vue.Draggable. There are two ways: npm and yarn (I use npm)

Npm I-S vuedraggableyarn add vuedraggable

Step 2: after the global installation is completed, the global reference in main.js can also be used on the required page (I introduced it on a single page because I only need one page)

Import draggable from "vuedraggable" export default {components: {draggable}}

Step 3: installation and referencing are complete, and you are now ready to use it.

Note:

/ * the data in the code is your data list, and onMove is the function method that triggers when you drag the picture. * there must be a v-for loop under the transition-group tag, otherwise an error will be reported. * * /

In this way, a simple demo for drag-and-drop sorting of images is complete.

Project draggable drag and drop move picture order

The first step, the second step of importing npm i vuedraggable, the third step of introducing import draggable from 'vuedraggable'; into the component, the third step of defining the component components: {draggable}, and the fourth step, using {{canEdit? 'adjust': 'lock'}}

{{item.name}} import draggable from 'vuedraggable' Export default {components: {draggable}, data () {return {canEdit:true, imgList: [{path: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg', name:' 1customers,} {path: 'https://lupic.cdn.bcebos.com/20210629/26202931_14.jpg', name:' 2percent,}, {path: 'https://lupic.cdn.bcebos.com/20210629/27788166_14.jpg', name:' 3percent,}]}} Created () {}, mounted () {}, methods: {onMove (relatedContext, draggedContext) {console.log (relatedContext.relatedContext.list) }, removeEvent (item) {if (this.canEdit) {this.canEdit = false;} else {this.canEdit = true;} console.log (this.canEdit);}}. App-container {background: # ffffff; height: 100%; .dargBtn-lock {margin: 0px 50px; color: # 2ea9df }. Projset-content {list-style-type: none; position: relative; li {display: inline-block; margin: 10px;} img {width: 141px; height: 100px;} span {justify-content: center; display: flex;} .dargBtn {position: absolute; line-height: 100px Text-align: center; width: 141px; height: 100px; display: none; color: white; background: rgba (101,101,101,0.6);} .draggable {cursor: pointer; width: 141px; height: 100px;} .draggable: hover .dargBtn {display: block This is the end of the article on "how to drag pictures to sort Vue.Draggable by vue". Thank you for reading! I believe that everyone has a certain understanding of "vue how to drag pictures to sort Vue.Draggable" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.