기술나눔

Vue 드래그 가능한 구성 요소는 요소를 드래그할 때 요소의 데이터 또는 설정에 정의된 데이터를 얻습니다.

2024-07-12

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

예를 들어 드래그 시작 기능에서 주로 요소에 사용자 정의 속성을 추가하여 현재 드래그된 요소의 데이터를 가져와야 합니다.

순환 목록에서 속성 ID를 가져와야 하는 경우myid 속성 사용자 정의요소에 바인딩합니다.

물론, 여러 항목을 전달하려는 경우 문자열을 사용하여 함께 연결하고 마지막으로 필요한 값에 따라 처리할 수 있습니다.

예: :myid="item.id+','+item.schoolId" 이와 같이 여러 값을 하나의 속성에 바인딩하는 것이 사용하기 편리합니다.

아래 코드에서는 속성이 하나만 필요하므로 하나만 바인딩합니다.

  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>

통과하다e.항목.속성.myid.값 이렇게 받으세요. 참고: e는 이벤트 객체입니다.

  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. };