滚动触摸设备上的 jQuery UI Draggables 触发拖动

Question

我正在使用 jQuery UI 的 Draggables 和 droppables 功能。为了让它在触摸设备上工作，我使用了 jQuery UI Touch Punch。

我有一个可拖动的列表，它们周围没有太多空间。在触摸设备上，我发现滚动列表的唯一方法是使用可拖动对象周围非常狭窄的空间，这对用户不友好。我考虑过添加按钮来向上和向下滚动，但我认为这对于习惯于滑动滚动的用户来说可能会感到陌生和笨拙。我最终找到了一种 hacky 解决方法，但它有两个问题：

1. 滑动开始滚动之前需要一段时间，这可能会给 网站落后的错误印象。

2. 滚动没有动态方面，所以需要做更多的工作 比平时滚动。

我的问题

是否可以改进我的代码来解决上述两个问题，或者我应该采取完全不同的方法来解决这个问题？

代码

jsFiddle demo • full screen result of jsFiddle demo

HTML

<p>Drag the colored squares into the gray area on the right.</p>

<ul>
    <li><span class="red"></span></li>
    <li><span class="orange"></span></li>
    <li><span class="yellow"></span></li>
    <li><span class="green"></span></li>
    <li><span class="blue"></span></li>
    <li><span class="purple"></span></li>
    <li><span class="red"></span></li>
    <li><span class="orange"></span></li>
    <li><span class="yellow"></span></li>
    <li><span class="green"></span></li>
    <li><span class="blue"></span></li>
    <li><span class="purple"></span></li>
    <li><span class="red"></span></li>
    <li><span class="orange"></span></li>
    <li><span class="yellow"></span></li>
    <li><span class="green"></span></li>
    <li><span class="blue"></span></li>
    <li><span class="purple"></span></li>
    <li><span class="red"></span></li>
    <li><span class="orange"></span></li>
    <li><span class="yellow"></span></li>
    <li><span class="green"></span></li>
    <li><span class="blue"></span></li>
    <li><span class="purple"></span></li>
</ul>

<div></div>

CSS

p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 10px;
}

ul, div {
    float: left;
    height: 440px;
    background-color: #ccc;
    border: 1px solid #000;
}

ul {
    width: 127px;
    overflow-y: scroll;
    list-style: none;
}

li span {
    margin: 9px auto;
}

span {
    display: block;
    width: 100px;
    height: 100px;
    border: 5px solid #000;
}

.red {
    background-color: #f00;
}

.orange {
    background-color: #ff8000;
}

.yellow {
    background-color: #ff0;
}

.green {
    background-color: #0f0;
}

.blue {
    background-color: #00f;
}

.purple {
    background-color: #f0f;
}

div {
    width: 330px;
    margin-left: 20px;
}

div span {
    float: left;
}

JavaScript

// BEGIN: My attempt to fix the scrolling issue on touch devices

if ('ontouchstart' in document.documentElement) {
    $('span').on('dragstart', function(e) {
        if ($(this).hasClass('scroll')) {
            e.preventDefault();
        }
    }).on('mousemove', function(e) {
        if ($(this).hasClass('scroll')) {
            $('ul').scrollTop(scroll_top_on_mousedown + mousedown_coords.pageY - e.pageY);
            return false;
        }

        if (typeof(mousedown_coords) == 'object' && Math.max(
                Math.abs(mousedown_coords.pageX - e.pageX),
                Math.abs(mousedown_coords.pageY - e.pageY)
            ) >= 80
        ) {
            if (e.pageX - mousedown_coords.pageX < 70) {
                $(this).addClass('scroll');
            }
        }
    }).on('mousedown', function(e) {
        mousedown_coords = {
            'pageX': e.pageX,
            'pageY': e.pageY,
        };

        scroll_top_on_mousedown = $('ul').scrollTop();
    }).on('touchend', function() {
        $(this).trigger('mouseup'); // Android fix

        delete window.mousedown_coords;
        $('ul .scroll').removeClass('scroll');
    });
}

// END: My attempt to fix the scrolling issue on touch devices

$('span').draggable({
    distance: 90,
    helper: 'clone',
    containment: $('div')
});

$('div').droppable({
    drop: function(event, ui) {
        if ($(this).children('span').length == 12) {
            $(this).empty();
        }

        $(this).append($(ui.draggable).clone());
    }
});

Answer 1

不幸的是，我认为最好的答案是重新考虑您的 UI。强制用户滚动可拖动元素只会出现问题。起初我以为使用 jQuery 的 tabhold 事件可以延迟 draggable 事件，但他们不想一起玩得很好。