draggable für mehrere Elemente

[Eiszwerg]

Moin zusammen,

ich bin grad ein wenig verzweifelt, weil ich offenbar den Wald vor lauter Bäumen nicht mehr sehe.

Ich versuche gerade ein Gadget für die Windows-Sidebar zu verbessern.
Das Gadget hat verschiedene "Punkte" (Grafiken), die in einem Bereich verschoben werden können. Dazu bediene ich mich bei der draggable-"Funktion" von jQuery.

Bisher habe ich sämtliche Grafiken einzeln "angelegt".
Ich habe quasi für jede Grafik sowas in den Code geschrieben:

$(function() 
     {
        $("#char1").draggable
        ({
            grid: [ 5,5 ], scroll:false, containment: "parent",
            start: function() {},
            drag: function() {},
            stop: function() {
    	      var pos1 = $(this).position();
              System.Gadget.Settings.write("char1_left",pos1.left);
              System.Gadget.Settings.write("char1_top",pos1.top);
            }
        });
     });

Die Ziffer "1" wurde hierbei dann immer um 1 erhöht.
Sehr lästig.

Nun würde ich das Ganze gerne dynamisch durch eine for-Schleife generieren wollen, aber irgendwie scheint das nicht zu klappen, da die Positionswerte einfach nicht gespeichert werden

Versucht hab ich es so:

$(function () 
     {
       var chars = System.Gadget.Settings.read("chars")*5;
       for (i=1;i<=chars;i++)
        {
          $("#char"+i).draggable
          ({
              grid: [ 5,5 ], scroll:false, containment: "parent",
              stop: function() 
              {
      	        var pos = $(this).position();
                System.Gadget.Settings.write("char"+i+"_left",pos.left);
                System.Gadget.Settings.write("char"+i+"_top",pos.top);
              }
          });
        }
      });

Wichtig ist, dass nach Beendigung des Drags die Position der Grafik in die entsprechende Setting-Variable des Gadgets geschrieben werden muss. Natürlich in die der korrekten Grafik (1-n).

Wer kann mir helfen?
Danke!

 

[Eiszwerg]

Hab da heute Nacht noch ein paar mal drauf rumgedacht, bin aber nicht wirklich weitergekommen, weil das Thema für mich doch recht frisch ist.

Ich vermute aber ganz stark, dass ich einen gedanklichen Fehler mache.

Muss ich wirklich für jede Grafik, die bewegt werden soll, ein eigenes .draggable anlegen, um später eine Zuordnung der Positionswerte zu einer bestimmten Variable zu erhalten?

Kann ich nicht einfach "irgendwie" ein .draggable auf alle Grafiken anwenden und das Objekt, welches bewegt wurde anders auslesen und somit eine Zuordnung durchführen?

Bin echt für jeden Tipp dankbar!

 

[Eiszwerg]

Nach einiger Suche bin ich nun über nicht funktionierendes ui.draggable.attr() und ähnliche Dinge auf event.target.id gestoßen, welches in einem einfachen Test die id des Objekts zurückliefert. Ich werd heute Abend mal schauen, ob ich das eingebaut bekomme und ob es funktioniert

 

[Eiszwerg]

Meiner Idee nach, würde ich den Code dann wie folgt schreiben:

$(function () 
{
  $(".dragme").draggable
  ({
    grid: [ 5,5 ], scroll:false, containment: "parent",
    stop: function(event, ui) 
    {
      var pos = $(this).position();
      System.Gadget.Settings.write("char"+event.target.id+"_left",pos.left);
      System.Gadget.Settings.write("char"+event.target.id+"_top",pos.top);
    }
  });
});

Den Grafiken gebe ich dann einfach die class="dragme" mit und eine id="1" bis id="n". Somit kann ich dann die Positionswerte hoffentlich in die entsprechenden Variablen schreiben.

<img class="dragme" id="1" src="gfx/11.png" alt="no note">
<img class="dragme" id="2" src="gfx/12.png" alt="no note">
<img class="dragme" id="n" src="gfx/1n.png" alt="no note">

Danke für die Aufmerksamkeit

 

[Eiszwerg]

Hat funktioniert