• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

L

loritan

New member
Hallo liebe Foren Mitglieder,

derzeit versuche ich Elemente durch Javascript draggable zu bekommen. Ich benutze hierzu Hammer.js um die Press/Touch Events abzufangen. Nach einem Timeout (Jquery) erzeuge ich dann mittels Jquery UI ein draggable Element.

Problem an der ganzen Geschichte ist, dass ich nun einmal den Finger vom Touchscreen nehmen muss und wieder auf das Element drücken muss um es zu verschieben. Ich komme einfach auf keine Idee, wie ich dieses Problem Lösen könnte.
Ich will im Grunde Drücken gedrückt halten und dann verschieben können. Anbei ein Code Auszug:

HTML: 
$('.availableDevices .device[data-id]').each(function(){

var that = this;              
var hammer = new Hammer(this);

hammer.on('press',function(e){
   var timer = setTimeout(function(){
   $(that).draggable({
              scroll:true,
              containment: $("#"+that.id),
              revert: true,
              disabled:true,
              cursor: 'crosshair'});    
   },500);
   $(that).on('mouseup',function(e){
     clearTimeout(timer);
   });
  });
});

Ich freue mich über jede Hilfe hocke an dem mist schon seit fast einer Woche und komme einfach nicht weiter....
Das Internet ist nicht gerade gefüllt mit Informationen darüber. (touchpunch ist ebenfalls eingebunden).

Vielen Dank
 
Zuletzt bearbeitet von einem Moderator:
Ich kenne hammer.js jetzt nicht, aber ich denke, dass du einfach das falsche Event verwendest. Nativ würde ich ontouchstart und onmousedown verwenden.

PS: verwende für Code doch bitte die [code]-Tags.
 
Hei kkapsner,

klar leg ich nächstes mal den Tag um den Code.

Zum Thema das Problem bezeiht sich nicht auf das mousedown event, dieses funktioniert, sowohl mit press und auch mit mousedown, die aktion das Element draggable zu machen auch. Allerdings muss mann dann erst wieder die Maus loslassen und wieder Mousedown drücken, um das Element tatsächlich verschieben zu können.

Wenn ich nachdem ich das element Draggable geamcht habe noch ein Mouseup und dann Mousedown simuliere, funktioniert es aber nicht, da er dann logischerweise wieder in die mousedown methode geht. bedeutet ich lande somit in einer dauerschleife.

Man könnte das hammer JS also auch komplett raus lassen

Code: 
$('.availableDevices .device[data-id]').each(function(){

var that = this;              

$(this).on('mousedown',function(e){
   var timer = setTimeout(function(){
   $(that).draggable({
              scroll:true,
              containment: $("#"+that.id),
              revert: true,
              disabled:true,
              cursor: 'crosshair'});    
   },500);
   $(that).on('mouseup',function(e){
     clearTimeout(timer);
   });
  });
});
 
Zuletzt bearbeitet:
Also wenn es dazu keine Lösung gibt, würde mir auch ein Vorschlag reichen, mit dem ich dafür sorgen kann, dass X Elemente auf einem Touchdevice untereinander sowohl Draggable sind als auch scrollbar. Derzeit wäre es so,wenn man Scrollen möchte, verschiebt man immer nur die Elemente Scrollbar ist es also nicht, mit delay der Draggable Methode ist dies auch nicht möglich
 
loritan schrieb:
Also wenn es dazu keine Lösung gibt,
Zum Vergrößern anklicken....
wofür eine lösung? du willst bei mousedown ein element nach 0.5 sek draggable machen, dann musst du natürlich nach 0.5 sek nochmal draufklicken und verschieben.


loritan schrieb:
würde mir auch ein Vorschlag reichen, mit dem ich dafür sorgen kann, dass X Elemente auf einem Touchdevice untereinander sowohl Draggable sind als auch scrollbar. Derzeit wäre es so,wenn man Scrollen möchte, verschiebt man immer nur die Elemente Scrollbar ist es also nicht, mit delay der Draggable Methode ist dies auch nicht möglich
Zum Vergrößern anklicken....
ja wie denn auch? es ist ja beides die gleiche geste. bist du beim scrollen auf einem draggable ist nicht klar, ob du scrollen oder draggen willst.
 
Hey hesst,

es muss doch aber die Möglichkeit bestehen, nach 0,5 sek das Element direkt zu verschieben. Somit wäre doch die Möglichkeit gegeben zu scrollen, solange man nicht die 0,5 Touchzeit überschreitet.

Und zu dem Vorschlag, naja ich hab ne Möglichkeit versucht, indem ich ich im aktuellen Mousedownevent, dass OriginalEvent trigger. Der Ablauf Funktioniert dann sogar tatsächlich also: Touch 0,5 sek warten und verschieben. Unterschreitet man die Zeit macht er durch die Methode :
Code: 
$(that).on('mouseup',function(e){
     clearTimeout(timer);
   });

nichts. Allerdings schmeißt mir die Console dann : Uncaught TypeError: Illegal invocation.

Es muss doch die Möglichkeit geben so etwas zu realisieren.
 
loritan schrieb:
es muss doch aber die Möglichkeit bestehen, nach 0,5 sek das Element direkt zu verschieben. Somit wäre doch die Möglichkeit gegeben zu scrollen, solange man nicht die 0,5 Touchzeit überschreitet.
Zum Vergrößern anklicken....
das verhalten kannst du dir natürlich selbst basteln, du müsstest dann für neuere browser auf die eingebaute Drag'n Drop unterstützung verzichten und könntest für alte kein standard polyfill verwenden.
aber das verhalten ist "komisch". das erwartet keiner, damit kommt niemand zurecht. [/QUOTE]

loritan schrieb:
Allerdings schmeißt mir die Console dann : Uncaught TypeError: Illegal invocation.
Zum Vergrößern anklicken....
wo? wann? wenn der timeout abgelaufen ist und du ja trotzdem irgendwann die mouse loslassen musst?
 
Ich bin mir nicht ganz sicher ob das nicht nur ein Nebeneffekt, ist dass es vermeintlich funktioniert.
Er schmeißt das glaub ich dann aus Jquery in irgendeiner Funktion bei event.preventDefault().
Ja ich glaube auch das Drag an Drop noch nicht so wirklich für Touchdevies gemacht ist, am Desktop alles wunderbar aber auf Mobilgeräten geht es halt in Listen nicht durch das fehlende Mausrad. Aber irgendwie scheint es ja nur dranan zu scheitern, dass man nie events nicht wirklich verzögert erzeugen kann, auch alle simulierten klicks und touchevents die ich probiert habe, ich lande am Ende immer wieder beim gleichen Fehler. Schade Drum aber ich denke ich stimme die Zu das es ein "komisches" verhalten darstellt.
 
loritan schrieb:
Er schmeißt das glaub ich dann aus Jquery in irgendeiner Funktion bei event.preventDefault().
Zum Vergrößern anklicken....
damit kann ich nichts anfangen

loritan schrieb:
Ja ich glaube auch das Drag an Drop noch nicht so wirklich für Touchdevies gemacht ist,
Zum Vergrößern anklicken....
ich sehe kein problem

loritan schrieb:
am Desktop alles wunderbar aber auf Mobilgeräten geht es halt in Listen nicht durch das fehlende Mausrad.
Zum Vergrößern anklicken....
Mausrad? das verstehe ich nicht
 
ich kann dir ja hier schlecht meinen ganzen Code reinschmeissen.

Problem ist nicht das Darg auch nicht das Drop das Funktioniert alles einwandfrei. Es existiert eine Liste, die über den Angezeigten Browser Content hinausgeht. Am Desktop besteht somit kein Problem.
Ich Scrolle am Mausrad und komme unten am letzten Element der Liste an.

Mache ich die Seite mit einem Mobilgerät, bzw Mobilbrowser auf, so kann ich eben nicht mehr über die Elemente nach unten Scrollen. Da ich ja bei Touch auf die Elemente diese verschiebe.

Und für genau dieses Problem benötige ich einen Lösungsansatz.
 
der scrollt doch automatisch beim runterschieben?!
oder meinst du gar nicht beim draggen, sondern weil du beim wischen auf einem draggable anfängst?
 
Zuletzt bearbeitet:
genau das zweite beim wischen befinde ich mich auf dem Draggable Elementen. Und weiß halt nicht wie ich den Dragstart dann Verzögern oder ähnliches könnte.
 
loritan schrieb:
genau das zweite beim wischen befinde ich mich auf dem Draggable Elementen. Und weiß halt nicht wie ich den Dragstart dann Verzögern oder ähnliches könnte.
Zum Vergrößern anklicken....
ja, so wie du es gemacht hast, du musst nur aufpassen, keinen timeout zu clearen, der nicht mehr existiert, weil die 500µs um sind
 
ha, selbst mit html5 drag'n drop kann man nicht arbeiten, weil im ff während des verschiebens kein scrollen möglich ist
kann das mal jemand im ie oder chrome probieren? ist das beispiel mit 0,5 sek warten ehe es los geht:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="jquery.js"></script>
    <script>
      $(document).ready(function()
      {
        var to = null;
        $('#drag').css('user-select','none').prop('unselectable','on').on('selectstart',false);
        $("#drag").on("mousedown", function(e)
        {
          if(!to)
          {
            to = setTimeout(function()
            {
              e.currentTarget.draggable=true;
              var clickEvent = document.createEvent("MouseEvent");
              clickEvent.initMouseEvent("mousedown", true, true, window, 1, e.originalEvent.screenX, e.originalEvent.screenY, e.originalEvent.clientX, e.originalEvent.clientY, false, false, false, false, 0, null);
              e.target.dispatchEvent(clickEvent);
              to = null;
            }, 500);
          }
        }).on("mouseup", function(e)
        {
          if (to)
          {
            clearTimeout(to);
            to = null;
          }
          e.currentTarget.draggable=false;
        }).on("dragstart", function(e)
        {
          var dt = e.originalEvent.dataTransfer;
          dt.setData('text', 'Data to Drag');
        }).on("dragend",function(e)
        {
          e.currentTarget.draggable=false;
        });
        
        $("#drop").on("dragenter", function(e)
        {
          e.preventDefault();
        }).on("dragover", function(e)
        {
          e.preventDefault();
        }).on("drop", function(e)
        {
          var data = e.originalEvent.dataTransfer.getData("text");
          e.target.textContent = data;
          e.preventDefault();
        });
      });
    </script>
  </head>
  <body>
    <div id="drag" draggable="false">
      This text <strong>may</strong> be dragged.
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="drop">
      Drop it here.
    </div>
  </body>
</html>

edit: der ie scrollt zwar beim verschieben, aber den bekomme ich nicht dazu überredet nach den 0,5 sek den drag zu starten. der ff macht das einfach so, wenn ich draggable auf true setze, der ie nicht, auch wenn ich ein weiteres mousedown simuliere.
bleibt also doch nur die jquery lösung
Code: 
<html>
  <head>
    <title></title>
    <link href="jquery-ui.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
      $(document).ready(function()
      {
        var to = null;
        $('#drag').css('user-select','none').prop('unselectable','on').on('selectstart',false);
        $('#drag').draggable({
          scroll: true,
          containment: "drag",
          revert: true,
          cursor: 'crosshair'
        }).draggable("disable").on("mousedown", function(e)
        {
          if (!to)
          {
            to = setTimeout(function()
            {
              $(e.currentTarget).draggable("enable");
              $(e.currentTarget).trigger(e);
              to = null;
            }, 500);
          }
        }).on("mouseup", function(e)
        {
          if (to)
          {
            clearTimeout(to);
            to = null;
          }
          $(e.currentTarget).draggable("disable");
        });
        $("#drop").droppable({
          drop: function(event, ui)
          {
            $(event.target).html("Dropped!");
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="drag">
      This text <strong>may</strong> be dragged.
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="drop">
      Drop it here.
    </div>
  </body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben