滚动浏览器上的jQuery UI Draggables触发器拖动

Question

我正在使用jQuery UI的可拖动和拖放功能。为了使它在触控设备上运行，我使用了jQuery UI Touch Punch。

我有一个可拖动的列表，它们周围没有太多空间。在触控设备上，我发现滚动列表的唯一方法是使用可拖动的周围非常狭窄的空间，这不是用户友好的。我曾考虑添加按钮以上下滚动，但我认为这对于习惯了滑动滚动的用户来说可能会感到陌生和笨重。我结束了那种哈克变通方法，但它有两个问题：

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事件，但他们不想一起玩。