HTML slepen en neerzetten op mobiele apparaten

Als je slepen en neerzetten toevoegt aan een webpagina met JavaScript, zoals jQuery UI draggable and droppable, hoe krijg je dit dan werkend wanneer het wordt bekeken via een browser op een mobiel apparaat – waarbij de aanraakschermacties voor slepen zijn onderschept door de telefoon om over de pagina te scrollen enz.?

Alle oplossingen welkom… mijn eerste gedachten zijn:

  1. Heb een knop voor mobiele apparaten die het te slepen item ‘optilt’ en ze vervolgens laat klikken op de zone waarop ze het item willen neerzetten.

  2. Schrijf een app die dit voor mobiele apparaten doet in plaats van de webpagina erop te laten werken!

  3. Uw suggesties en opmerkingen alstublieft.


Antwoord 1, autoriteit 100%

jQuery UI Touch Punch lost het gewoon allemaal op.

Het is een Touch Event-ondersteuning voor jQuery UI. Kortom, het verbindt gewoon de touch-gebeurtenis terug naar de jQuery UI.
Getest op iPad, iPhone, Android en andere aanraakgevoelige mobiele apparaten.
Ik heb jQuery UI sortable gebruikt en het werkt als een tierelier.

http://touchpunch.furf.com/


Antwoord 2, autoriteit 25%

Er is een nieuwe polyfill voor het vertalen van aanraakgebeurtenissen naar slepen en neerzetten, zodat HTML5 slepen en neerzetten bruikbaar is op mobiel.

De polyfill is geïntroduceerd door Bernardo Castilho op dit bericht.

Hier is een demovan dat bericht.

Het bericht bevat ook verschillende overwegingen van het folyfill-ontwerp.


Antwoord 3, autoriteit 9%

Ik moest een drag-and-drop + rotatie maken die werkt op desktop, mobiel, tablet inclusief Windows Phone. De laatste maakte het ingewikkelder (mspointer vs. aanraakgebeurtenissen).

De oplossing kwam van de geweldige Greensock-bibliotheek

Het kostte wat moeite om door hoepels te springen om hetzelfde object versleepbaar en draaibaar te maken, maar het werkt perfect


Antwoord 4, autoriteit 7%

De bètaversie van Sencha Touchheeft ondersteuning voor slepen en neerzetten.

Je kunt verwijzen naar hun DnD-voorbeeld. Dit werkt trouwens alleen in webkit-browsers.

Het achteraf inbouwen van die logica in een webpagina zal waarschijnlijk moeilijk zijn. Zoals ik het begrijp, schakelen ze alle browserpanning uit en implementeren ze panning-gebeurtenissen volledig in javascript, wat een correcte interpretatie van slepen en neerzetten mogelijk maakt.

Update:de originele voorbeeldlink is dood, maar ik heb dit alternatief gevonden:
https://github.com/kostysh/Drag-Drop-example- voor-Sencha-Touch


Antwoord 5, autoriteit 4%

De Sorteerbare JS-bibliotheekis compatibel met touchscreens en vereist geen jQuery.

De bibliotheekgrootte is 43 KB.

Op de officiële website staat in een video dat deze bibliotheek sneller werkt dan JQuery UI Sortable.


Antwoord 6, autoriteit 3%

Je kunt net zo goed Tim Ruffle’s drag-n proberen -drop polyfill, zeker vergelijkbaar met die van Bernardo Castilho(zie het antwoord van @remdevtec).

Doe gewoon npm install mobile-drag-drop --save(andere installatiemethoden beschikbaar, bijv. met prieel)

Vervolgens zou elke elementinterface die afhankelijk is van aanraakdetectie moeten werken op mobiel (bijv. alleen een element slepen, in plaats van tegelijkertijd scrollen + slepen).


Antwoord 7, autoriteit 2%

hier is mijn oplossing:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Antwoord 8

JQuery Touch Punch is geweldig, maar wat het ook doet, is alle bedieningselementen op de versleepbare div uitschakelen, dus om dit te voorkomen, moet je de regels wijzigen… (op het moment van schrijven – regel 75)

wijzig

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

om te lezen

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

voeg zoveel ors toe als je wilt voor elk van de elementen die je wilt ‘ontgrendelen’

Hoop dat dat iemand helpt


Antwoord 9

Voor vue 3 is er https://github.com/SortableJS/vue.draggable .volgende

Voor vue 2 is dit https://github.com/SortableJS/Vue.Draggable

De laatste kun je als volgt gebruiken:

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

Deze zijn gebaseerd op sortable.js

Other episodes