Drag & Drop auf das IPad-Web-App - während die übrigen Scroll-Funktionalität

Ich bin mit Jquery UI Drag-and-Drop ( http://jqueryui.com/demos/draggable ) zusammen mit https://github.com/furf/jquery-ui-touch-punch
auf der Karte touch-Ereignisse Maus-Ereignisse. Die ganze drag-und-drop-Sache funktioniert gut so weit.

Ich habe das problem jetzt ist, dass ich eine lange Liste von ziehbaren Elemente und ich muss in der Lage sein, um einen Bildlauf durch die Liste auf dem IPad als auch... Wenn ich aus der Liste Elemente ziehbar diese nicht mehr funktionieren.

Ich habe versucht mit der jqueryui Marker wie distance und delay
- aber selbst dann wird das scroll-Ereignis zu sein scheint, Schwerbehinderten - /überlagert mit den drag-event.

Muss ich wohl zum schreiben eines benutzerdefinierten Funktion wie "nur wenn nach Links verschieben mindestens 50 px machen es ziehbar" oder so etwas.

Hat jemand jemals begegnet ein ähnliches problem und ist bereit zu teilen, som Gedanken darüber?
Andere mobile-web-frameworks wie Sencha oder JQmobile ausgestattet mit einer solchen Funktionalität?

Vielen Dank im Voraus...

InformationsquelleAutor tmaximini | 2012-08-16
  1. 4

    Es hängt von Ihrem design natürlich, aber Sie könnten versuchen, mit Griffen.

    Hier ist jQuery UI Dokumentation Beispiel :

    <div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">drag with handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
    <p>drag from content</p>
    <p class="ui-widget-header">not drag with handle</p>
</div>

$("#draggable").draggable({handle:"p"});
$("#draggable2").draggable({cancel:"p.ui-widget-header"});

    Oder zumindest die option Abbrechen könnte, geben Sie eine start.

    http://jsfiddle.net/Dn9DX/

    • danke für deine Antwort... ich habe nur ein <span> in den <li> - element ziehbar, aber das ist nicht das gewünschte UI-design. das ganze <li> sollte ziehbar und Scrollbar....
    • Ist Ihre ul-tag mit 100% der Breite Ihres iPad ? Wie wäre es mit etwas ähnlich zu dem, was Sie Tat, auf die .Schieberegler() demo Seite : jqueryui.com/demos/slider/#side-scroll Diese einfache scrollbar-Beispiel könnte eine nette Abhilfe. Eine andere Möglichkeit ist das hinzufügen einer Schaltfläche, um die ganze Sache gezogen werden kann oder nicht, aber wieder, es hängt davon ab, was Ihre app tun soll...
    • nee, es nur so 20% der landcscape anzeigen. es gibt 2 scrollbare Listen mit drag-Elemente und 60% Breite Leinwand drop-zone mehr oder weniger
    InformationsquelleAutor Gil Zumbrunnen
  2. 3

    Ich löste dies durch den Wechsel von https://github.com/furf/jquery-ui-touch-punch
    der code in dieser Lösung: Javascript Drag & drop für touch-Geräte.

    In der end-alle musste ich anpassen, war das entfernen der event.preventDefault(); zu re-aktivieren Blättern.

    Bearbeiten

    Im Grunde benutzte ich den code aus der zweiten Antwort, die ich verlinkt - allerdings mit einigen Anpassungen.
    Hier ist die JS-fiddle meine Lösung, hoffe es hilft: http://jsfiddle.net/LQuyr/8/

    • Ich fand, dass, wenn Sie wickeln die Veranstaltung.preventDefault() in einer if-Anweisung, die bewirkt nur, dass es das Feuer auf mousemove dann verhindert es irgendwelche Probleme mit der Sperrung von anderen event-Typen.
    • Könnte Sie post ein jsfiddle Beispiel Ihrer arbeiten javascript bitte? Es ist nicht klar, welche Modifikationen müssen vorgenommen werden.
    • Hinzugefügt eine Geige von meiner Lösung
    • Ich öffnete die jsfiddle in ein iPhone, und vergrößert so das "Element 1" divs zum oberen und unteren Rand der Seite, um zu testen, scrollen. Ich finde, dass das berühren eines Elements und scrollen nicht scrollen - es verschiebt das element. Vielleicht habe ich missverstanden, aber ich dachte, die Idee war, lassen Sie scrollen beim berühren draggable divs, und nur ziehen, wenn die divs berührt werden für einen Zeitraum von Zeit.
    • Zusätzlich möchten Sie vielleicht, um zu verhindern, dass die ui-sortable aus scrollen beim ziehen, z.B. durch das hinzufügen einer css-Klasse beim ziehen.
    InformationsquelleAutor tmaximini
Schreibe einen Kommentar