如何使用滚动拖放div内的动态列表？

Question

谢谢你的时间.

我正在使用PhoneGap开发移动应用程序.我有一个有一些记录的视图,这些记录需要通过拖放来重新排列.此记录的数量可能从2到12不等,它们位于一个容器中,该容器通过css的本机属性实现滚动,如下所示:

div#parentDiv {
    -webkit-overflow-scrolling: touch;
    overflow:                   scroll;
    width:                      100%;
}

现在,问题是.我已经尝试过这样做,但似乎存在某种事件冲突.当您点击或执行"手指向下"事件时,持续的事件是内部容器的滚动,而不是能够拖放该视图的内部元素.

我尝试了一个不可接受的替代选项,您将在此屏幕截图中看到:

在这里,我向下滚动到列表的最后一个元素.

正如您将看到的,我需要保留滚动并进行拖放操作.

你知道我该如何解决这个问题吗？

我尝试过使用插件,HTML本机拖放,到目前为止,没有什么对我有用.

再次感谢.

Answer 1

我不确定我是否完全理解当前的问题。但是，这是我对解决方案的看法：

window.addEventListener("mousedown", function(e1){
    timer = setTimeout(startDrag_disableScroll, 500);
    window.addEventListener("mousemove", function(e2){
        //if not dragging, and |e1_location-e2_location|
        //exceeds a certain threshold, cancel the timer
        //otherwise, drag the object, if dragging
    });
});
window.addEventListener("mouseup", function(e){
    //disable dragging
});

function startDrag_disableScroll(e){
    //disable scrolling
    //enable dragging
}

1. 等待用户点击某个项目
2. 如果它们保持相同位置的时间很短（< .5s），我们从“滚动”模式切换到“拖动”模式；如果它们移动太多，我们可以假设它们想要滚动，所以我们不启用拖动。
3. 进入“拖动”模式后，我们通过将 CSS 溢出更改为隐藏来禁用滚动
4. 等到用户释放手指/鼠标后再切换回“滚动”模式。

这是一个带有完整演示的 JSFiddle。如果您快速单击并拖动鼠标，则不会发生任何事情（如果您使用的是移动设备，它应该滚动）。但是，如果单击并按住 0.5 秒，滚动将被禁用，可拖动项目将变为红色。一旦松开鼠标，它就会重置。

我假设您还希望能够在拖动时滚动。为此，您必须使用 JavaScript 进行自动滚动。如果他们将项目在屏幕上/下拖动得足够远，它将开始分别自动向上或向下滚动。