ドラッグ可能な属性を使用して、ドラッグ アンド ドロップしてパラメータを運び、それをグローバル カスタム命令としてカプセル化します。

1. ファイルの作成: src/directives/dragDrop.js

2. ドラッグ (ドラッグ) とドロップ (ドロップ) の 2 つのコマンドをそれぞれ定義します。

// 定义v-drag指令，用于绑定拖拽事件

/**
 * el:指令绑定的元素
 * binding：指令绑定的信息
 * binding.value:获取传递给指令的数据
 *
 * 使用要求：在标签中使用"v-drag"指令时，需要绑定一个函数，将需要传递的值作为参数 ,并在该函数中返回该数据
 *  例子：  <div v-drag="drag(pamas)"></div>
 *          drag(pamas){ return pamas}
 */
const drag = {
    mounted(el, binding) {
        // 使用HTML5的拖拽API使元素可以被拖拽
        el.setAttribute('draggable', 'true');

        // 处理拖拽开始的事件,在事件处理函数中将绑定的数据设置为文本数据
        el.addEventListener('dragstart', function (event) {
            let str = JSON.stringify(binding.value);

            event.dataTransfer.setData('text', str);
        });
    },
};

// 定义v-drop指令，用于绑定放置事件

/**
 * el:指令绑定的元素
 * binding：指令绑定的信息
 * binding.arg：获取指定绑定函数上的参数
 * binding.value：向指令绑定的函数传递拖拽时携带的参数
 *
 * 使用要求：在目标标签中使用"v-drop"指令时，需要绑定一个函数，专门用来接收传递的参数,如果函数自己要传递参数，需要写在指令后的[]中进行传递
 * 注意：目标指令绑定的函数中，第一个参数是用来接收拖动时携带的数据，第二个是用来接收函数自身的参数的
 * 例子：  <div v-drop:[params]="drop"></div>
 *         drop(data,params){...}
 */
const drop = {
    mounted(el, binding) {
        // 给元素绑定dragover事件，阻止浏览器默认的放置行为
        el.addEventListener('dragover', function (e) {
            e.preventDefault();
        });

        //   给元素绑定drop事件
        el.addEventListener('drop', function (e) {
            e.preventDefault();
            let param = e.dataTransfer.getData('text');

            try {
                param = JSON.parse(param);
            } catch (error) {
                // console.log('无数据');
            }

            // 向目标地址的函数发布数据
            binding.value(param, binding.arg);
        });
    },
};

export default {
    drag,
    drop,
};

3. main.js でグローバル カスタム ディレクティブを構成する

//引入指令文件
import dragDrop from '@/directives/dragDrop.js';
...

// 配置全局自定义指令
app.directive('drag', dragDrop.drag);
app.directive('drop', dragDrop.drop);

4. コンポーネントでの使用

 <p v-for="(sitem, sindex) of item.zero.list" :key="sindex">
      <span>{
    
    { sitem.sword }}</span>

    <!-- 添加拖拽属性，实现拖拽效果 
    <!-- 要求：在拖拽中，如果你需要传递数据，将你需要传递的数据当做参数即可 -->

    <span v-drag="drag">{
    
    { stampMinSecound(sitem.duration) }}</span>
    <span v-drag="drag(0)">{
    
    { stampMinSecound(sitem.triangle) }}</span>
    <span v-drag="drag(1)">{
    
    { stampMinSecound(sitem.straight) }}</span>
</p>

...

 <!-- 拖拽的目标地址，使用中需要绑定函数接收传递的数据,如果需要传递参数，写在指令后面的【】中 -->
<div v-show="item.type === 'chart'" v-drop:[123]="drop">
    <ChartTrickDiff :data="chartData[`diff${index}`]" />
</div>

...
script

 // ======= 拖拽函数 =======
// 拖拽指令绑定的方法，用于传递的数据,也可以在拖拽前，进行一些操作
drag(param) {
    return param;
},

// 目标指令绑定的方法，用于接收拖拽过来的数据并对数据进行一些操作
drop(data, arg) {
    console.log('-------------', data);
    console.log('=============', arg);
},