Ergebnis 1 bis 14 von 14
  1. #1
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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-Code:
    $('.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
    Geändert von mikdoe (16-08-2014 um 07:27 Uhr) Grund: Präfix korrigiert und HTML Tags

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.663

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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.

  3. #3
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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);
       });
      });
    });
    Geändert von loritan (16-08-2014 um 11:38 Uhr)

  4. #4
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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

  5. #5
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.639

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    Zitat Zitat von loritan Beitrag anzeigen
    Also wenn es dazu keine Lösung gibt,
    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.


    Zitat Zitat von loritan Beitrag anzeigen
    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
    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.

  6. #6
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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.

  7. #7
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.639

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    Zitat Zitat von loritan Beitrag anzeigen
    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.
    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]

    Zitat Zitat von loritan Beitrag anzeigen
    Allerdings schmeißt mir die Console dann : Uncaught TypeError: Illegal invocation.
    wo? wann? wenn der timeout abgelaufen ist und du ja trotzdem irgendwann die mouse loslassen musst?

  8. #8
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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.

  9. #9
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.639

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    Zitat Zitat von loritan Beitrag anzeigen
    Er schmeißt das glaub ich dann aus Jquery in irgendeiner Funktion bei event.preventDefault().
    damit kann ich nichts anfangen

    Zitat Zitat von loritan Beitrag anzeigen
    Ja ich glaube auch das Drag an Drop noch nicht so wirklich für Touchdevies gemacht ist,
    ich sehe kein problem

    Zitat Zitat von loritan Beitrag anzeigen
    am Desktop alles wunderbar aber auf Mobilgeräten geht es halt in Listen nicht durch das fehlende Mausrad.
    Mausrad? das verstehe ich nicht

  10. #10
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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.

  11. #11
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.639

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    der scrollt doch automatisch beim runterschieben?!
    oder meinst du gar nicht beim draggen, sondern weil du beim wischen auf einem draggable anfängst?
    Geändert von tsseh (19-08-2014 um 16:10 Uhr)

  12. #12
    loritan ist offline Grünschnabel
    registriert
    15-08-2014
    Beiträge
    7

    Thumbs up AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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.

  13. #13
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.639

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    Zitat Zitat von loritan Beitrag anzeigen
    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.
    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

  14. #14
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.639

    AW: Draggable Elemente erzeugen Browserabhängig Mobil/ Desktop

    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>
    Geändert von tsseh (21-08-2014 um 07:48 Uhr)

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 12-04-2012, 00:36
  2. Antworten: 2
    Letzter Beitrag: 07-01-2012, 09:40
  3. Viele Html-Elemente erzeugen
    Von Crashdown im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 02-06-2010, 08:39
  4. Fenster ohne Taskbar auf Desktop erzeugen
    Von Grumbartz im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 02-10-2009, 09:37
  5. onmouserover browserabhängig?
    Von kathrin im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 08-04-2005, 19:09

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •