Scrollen durch jQuery UI Draggables auf Touch Devices Trigger Ziehen

Question

Ich benutze die Drag & Drop Funktion von jQuery UI. Damit es auf Touch-Geräten funktioniert, verwende ich jQuery UI Touch Punch.

Ich habe eine Liste von Draggables, die nicht viel Platz um sie herum haben. Auf Touch-Geräten stellte ich fest, dass die einzige Möglichkeit, durch die Liste zu blättern, darin bestand, die sehr engen Bereiche um die Ziehpunkte herum zu verwenden, was nicht benutzerfreundlich ist. Ich habe darüber nachgedacht, Schaltflächen hinzuzufügen, um nach oben und unten zu blättern, aber ich denke, dass sich das für Benutzer, die es gewohnt sind, mit Wischen zu scrollen, fremd und klobig anfühlen würde. Ich endete mit Art einer Hacky Abhilfe, aber es hat zwei Probleme:

1. Es dauert eine Weile, bevor die Swipe zu bewegen beginnt, was den falschen Eindruck erwecken könnte, dass die Website hinkt.

2. Es gibt keinen kinetischen Aspekt beim Scrollen, also ist es viel mehr Arbeit zu scrollen als üblich.

Meine Frage

Kann mein Code verbessert werden, um die beiden oben genannten Probleme zu beheben oder sollte ich einen ganz anderen Ansatz nehmen, dieses Problem zu Fixierung?

Der Kodex

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

Leider glaube ich die beste Antwort Ihre UI neu zu denken ist. Einen Benutzer zum Scrollen über ziehbare Elemente zu zwingen, wird nur Probleme darstellen. Zuerst dachte ich, die Verwendung von jQuerys tabhold Event würde das draggable Event verzögern, aber sie wollen nicht nett zusammen spielen.