Compartir tecnología

El componente arrastrable de Vue, al arrastrar un elemento, obtiene los datos definidos en los datos o la configuración del elemento

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Por ejemplo, necesito obtener los datos del elemento arrastrado actual en la función de inicio de arrastre, principalmente agregando atributos personalizados al elemento.

Si necesita obtener una identificación de atributo en una lista circular, entoncesPersonalizar un atributo myidVincularse al elemento.

Por supuesto: si desea pasar varios, puede usar cadenas para unirlos y finalmente procesarlos de acuerdo con los valores requeridos.

por ejemplo: :myid="item.id+','+item.schoolId" Vincular varios valores a un atributo de esta manera es conveniente de usar.

En el código siguiente, solo necesito un atributo, por lo que solo vinculo uno.

  1. <VueDraggable
  2. v-model="List"
  3. @start="onDragStart(list,$event)"
  4. :animation="150"
  5. group="people"
  6. >
  7. <div
  8. v-for="(item, index) in List"
  9. @click.prevent="subClick(item, index)"
  10. @mousemove="handleMouseMove(item, index)"
  11. :key="item.id"
  12. :myid="item.id"
  13. >
  14. 一些要拖拽的模块内容
  15. </div>
  16. </VueDraggable>

aprobare.item.atributos.myid.valor Consíguelo así. Nota: e es el objeto del evento.

  1. const onDragStart = (list,e) => {
  2. delEleIndex.value=e.oldIndex;
  3. curList.value=list;
  4. draggedElement.value = e.item.attributes.myid.value;
  5. console.log("===当前拖元素的id==",draggedElement.value);
  6. };