如何在用户拖放时增加“开始滚动”区域的大小？

Question

用户可以通过拖放列表项来重新排序。问题是？如果他们想继续向上滚动，比如说，将项目从底部重新定位到顶部？拖放该项目时，他们必须将鼠标光标放置在窗口最顶部的极其狭窄的空间内。

发现这个功能很困难（我花了很长时间才发现我可以这样做——而且我是设计这个程序的人！）

此外，即使您了解该功能，它也非常棘手，如果您将光标稍微移出那个小条子，它就会停止滚动，或者滚动变得非常不稳定。

是否有一些简单的方法可以增加拖放过程中开始滚动的区域的大小？这将使它更加直观和易于使用。因为尝试完成此操作时的“默认行为”并不是将光标定位在窗口最顶部 3 毫米的窄带内。就是将其移动到靠近顶部区域的位置，可能在靠近顶部或底部的 100 像素区域内。

以下是相关代码部分：

    var elements = document.querySelectorAll('.box .item');
    var targetEl;
    var wrapper = document.querySelector(".box");
    var itemClip = document.getElementById("itemClip");
    
    var scopeObj;
    
    // === Event Binding ===
    for (var j = 0, max = elements.length; j < max; j++) {
      elements[j].addEventListener("dragstart", handleDrag);
      elements[j].addEventListener("dragend", handleDragEnd);
      elements[j].addEventListener("dragenter", handleDragEnter);
      
      elements[j].addEventListener("touchstart", handleTouch);
      elements[j].addEventListener("touchend", handleTouchEnd);
      elements[j].addEventListener("touchmove", handleTouchMove);
    }
    
    // === Function Kits ===


    function handleDrag(event) {
      targetEl = event.target;
      targetEl.classList.add("onDrag");
    }
    
    function handleDragEnd(event) {
      targetEl.classList.remove("onDrag");
    }
    
    function handleDragEnter(event) {
      wrapper.insertBefore(targetEl, event.target.closest(".item"));
    }
    
    function handleTouch(event) {
      defineScope(elements);
      targetEl = event.target;
      itemClip.style.top = event.changedTouches[0].clientY + "px";
      itemClip.style.left = event.changedTouches[0].clientX + "px";
      itemClip.innerText = event.target.innerText;
      itemClip.classList.remove("hide");
      targetEl.classList.add("onDrag");
    }
    
    function handleTouchEnd(event) {
      itemClip.classList.add("hide");
      targetEl.classList.remove("onDrag");
    }
    
    function handleTouchMove(event) {
      itemClip.style.top = event.changedTouches[0].clientY + "px";
      itemClip.style.left = event.changedTouches[0].clientX + "px";
      hitTest(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
    }
    
    function hitTest(thisX, thisY) {
      for (var j = 0, max = scopeObj.length; j < max; j++) {
        if (thisX > scopeObj[j].startX && thisX < scopeObj[j].endX) {
          if (thisY > scopeObj[j].startY && thisY < scopeObj[j].endY) {
            wrapper.insertBefore(targetEl, scopeObj[j].target);
            return;
          }
        }
      }
    }
    
    function defineScope(elementArray) {
      scopeObj = [];
      for (var j = 0, max = elementArray.length; j < max; j++) {
        var newObj = {};
        newObj.target = elementArray[j];
        newObj.startX = elementArray[j].offsetLeft;
        newObj.endX = elementArray[j].offsetLeft + elementArray[j].offsetWidth;
        newObj.startY = elementArray[j].offsetTop;
        newObj.endY = elementArray[j].offsetTop + elementArray[j].offsetHeight;
        scopeObj.push(newObj);
      }
    }

谢谢！

Answer 1

你发现了吗？我也有同样的问题:)