Implementing a Mobile Drag‑and‑Drop Component with Vue

Vue is a progressive framework for building user interfaces, and its component system makes it ideal for creating complex single‑page applications. This guide demonstrates the development of a mobile drag‑and‑drop component to illustrate Vue's componentization concepts.

Why Choose Vue?

Vue offers a virtual DOM, lightweight core, efficient data binding, a flexible component system, and a complete ecosystem, making it well‑suited for modern front‑end projects.

Why Encapsulate as a Vue Component?

Encapsulation improves code reusability and maintainability: parameters allow flexible configuration, and component‑level logic isolates concerns, making debugging easier.

Component Structure

A typical single‑file component consists of a template, script, and scoped style:

// Component template
<template>
  ...
</template>

// Component logic
<script type="text/javascript">
  export default {
    data() { return { /* ... */ } }
  }
</script>

/* Component style */
<style lang="scss" scoped>
  ...
</style>

Drag Principle

During a touch move, the element’s top and left values are updated based on clientX and clientY , causing the element to follow the finger.

Implementation Steps

On touchstart , record the initial touch coordinates ( clientX , clientY ) and the element’s offset ( initTop , initLeft ).

During touchmove , compute currTop = clientY - initTop and currLeft = clientX - initLeft , then set the element’s style.top and style.left accordingly.

On touchend , determine the new index in the list using the drag distance, and reorder the dragList array with splice .

Vue‑Specific Implementation

The component renders a list using v-for="(item, index) in dragList" . Touch handlers ( touchStart , touchMove , touchEnd ) manage the drag logic while keeping the DOM untouched; Vue’s reactivity updates the UI automatically.

// Template snippet
<ul class="drag-list">
  <li class="drag-item" v-for="(item, index) in dragList"
      @touchstart="touchStart"
      @touchmove="touchMove(index, item, $event)"
      @touchend="touchEnd">
    <div v-show="item.isShowUp" class="leave-block"></div>
    <div>{{item.txt}}</div>
    <div v-show="item.isShow" class="leave-block"></div>
  </li>
</ul>

Optimization

To improve user experience, a placeholder div is shown in the potential drop position ( item.isShow or item.isShowUp ), giving visual feedback before the element is released.

// Optimized
structure
<li class="drag-item" v-for="(item, index) in dragList"
    @touchstart="touchStart"
    @touchmove="touchMove(index, item, $event)"
    @touchend="touchEnd">
  <div class="leave-block" v-show="item.isShowUp"></div>
<div>{{item.txt}}</div>
  <div class="leave-block" v-show="item.isShow"></div>
</li>

PC vs Mobile

On PC, drag can be handled with native HTML5 draggable events ( draggable , dragstart , drag , dragend ) or mouse events ( mousedown , mousemove , mouseup ). Mouse coordinates are accessed via e.clientX and e.clientY , whereas mobile uses e.touches[0].clientX/Y .

Conclusion

The article walks through building a mobile drag‑and‑drop component in Vue, explaining component anatomy, data‑driven updates, touch handling, and optimization, while also noting differences when implementing similar functionality on desktop browsers.