Vue의 온드래거에 상당합니다.드래그 가능(Sortable.js)

Vue의 온드래거에 상당합니다.드래그 가능(Sortable.js)

어떤 것이 요소 위로 끌려가고 있는지 탐지할 수 있는 방법이 있습니까?아니면 호버 이벤트를 발생시킬까요?onMove를 통해 끌어다 놓은 요소에 클래스를 추가하는 방법을 찾았지만, 나에게는 효과가 없는 것 같습니다.

솔루션 https://jsbin.com/xuwocis/edit?html,js,output으로 JSBin을 만들었습니다.

var sorting = false;

new Sortable(el, {
    onStart: function() {
        sorting = true;
    },
    onEnd: function() {
      sorting = false;
      // remove styling
      targetElement.style.backgroundColor = '';
    },
//     forceFallback:true
});

// For native drag&drop
targetElement.addEventListener('dragover', function(evt) {
    evt.preventDefault();
});

targetElement.addEventListener('dragenter', function(evt) {
    if (sorting && !targetElement.contains(evt.relatedTarget)) {
        // Here is where you add the styling of targetElement
        targetElement.style.backgroundColor = 'red';
    }
});

targetElement.addEventListener('dragleave', function(evt) {
    if (sorting && !targetElement.contains(evt.relatedTarget)) {
        // Here is where you remove the styling of targetElement
        targetElement.style.backgroundColor = '';
    }
});


// For fallback
targetElement.addEventListener('mouseenter', function(evt) {
  if (sorting) {
    // Here is where you change the styling of targetElement
    targetElement.style.backgroundColor = 'red';
  }
});

targetElement.addEventListener('mouseleave', function(evt) {
  if (sorting) {
    // Here is where you remove the styling of targetElement
    targetElement.style.backgroundColor = '';
  }
});

el.addEventListener('touchmove', function(evt) {
  if (!sorting) { return; }
  var x = evt.touches[0].clientX;
  var y = evt.touches[0].clientY;
  var elementAtTouchPoint = document.elementFromPoint(x, y);
  if (elementAtTouchPoint === targetElement ||
      // In case of a ghost element, the element at touch point
      // is the ghost element and thus we need to check if the parent 
      // of the ghost element is the targetElement.
      elementAtTouchPoint.parentNode === targetElement) {
    targetElement.style.backgroundColor = 'red';
  } else {
    // Here is where you remove the styling of targetElement
    targetElement.style.backgroundColor = '';
  }
});

기본적으로 Sortable을 사용하여 정렬하는 경우JS는 폴백에 대해 마우스 입력 및 마우스 탈퇴 이벤트를 실행하고 네이티브 드래그 앤 드롭에 대해 드래그 입력 및 드래그 탈퇴 이벤트(무시 버블)를 수행합니다.만약 당신이 가지고 있지 않다면 당신은 둘 다 원할 것이다.forceFallback: true.

언급URL : https://stackoverflow.com/questions/54917268/ondragover-equivalent-in-vue-draggable-sortable-js