✔ Position von Draggable elementen ausgeben

[Sempervivum]

Möglicher Weise ist das das Problem. Wenn Du a++ notierst, muss die Variable zuvor initialisiert worden sein, sonst ist sie sowohl vor als auch nach dem Inkrementieren undefiniert und das mit den Setzen des z-index wird nichts.

 

[BartTotal]

Ja hab es jetzt initialisiert und es geht.
Nun sollte ich aber zusätzlich die Z-index position auch nicht in ein Input ausgeben :S

Danke für eure Hilfe habs so hinbekommen

Kann man eigentlich die Funktion kombinieren?
Das $(this).css("z-index", a++); gleich auch in ein Input die z-Index höhe anzeigt?
Bei der Position geht das ja:
$('#posZ').val('' + top );

 

[Sempervivum]

Natürlich, wo ist das Problem?

    $('#".$row->id."X').val('' + left );
    $('#".$row->id."Y').val('' + top );
    $('#".$row->id."Z').val('' + a );
    $(this).css("z-index", a++);

Wichtig ist hier, dass Du die Ausgabe vor der Zeile notierst, wo der z-Index gesetzt wird, weil danach die Variable inkrementiert ist.

 

[BartTotal]

Funktioniert soweit. Dachte könnte so die Zindex position in die db speichern was ja auch geht.
Nur zählt es jetzt bei jedem klick z-index +1 und wenn ich jetzt ein Objekt 20mal anklicke hat es zindex 20.
möchte ich jetzt ein anderes objekt über das alte schieben muss ich es jetzt min. 21 mal anklicken bevor es darüber erscheint :S

Hab grad keinen Plan wie ich das Problem lösen soll. das automatisch nach dem darüberscheiben letzt geschobene über dem 2.letzten ist und das 2.letzte über dem 3ten.

 

[Sempervivum]

Das hängt mit dem Gültigkeitsbereich deiner Variablen a zusammen. Anscheinend wird diese unabhängig für jedes einzelne Objekt angelegt. Wo hast Du sie denn definiert? Wenn Du sie hier definierst:

$(function(){
var a = 1;
var coordinates = function(element) {
    element = $(element);
    var top = element.position(

müsste sie eigentlich für alle Objekte gelten.

 

[BartTotal]

Ja habs so festgelegt.
Hab aber vieles mit Variablen geregelt:

<script type='text/javascript'>
$(function(){
var a = 1;
var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#".$row->id."X').val('' + left );
    $('#".$row->id."Y').val('' + top );
    $('#".$row->id."Z').val('' + a );
    $(".$row->id.").css('z-index', a++);
}
$('#$row->id').draggable({
containment: \"#window\",

start: function() {
  var a = 1;
  coordinates('#$row->id');
  $(".$row->id.").css(\"z-index\", a++);
},

stop: function() {
  coordinates('#$row->id');
   }
});
});    
</script>

Hm. Muss den Script anders platzieren, wird momentan für jede einzelne Ausgabe erstellt.

 

[BartTotal]

Hast du ne idee wie ich ihn vor der php abfrage platzieren kann und trotzdem alles variabel machen kann.

 

[Sempervivum]

Einfach wäre es, wenn Du die Variable unabhängig von den Skripts definieren würdest:

<script type='text/javascript'>
var a = 1;
</script>

Und dahinter und unabhängig dann die einzelnen Skripts.
Mit PHP ist es kein Problem, diese vervielfachten Skripts anzulegen, aber das Ergebnis ist aus Javascript-Sicht nicht sehr elegant. Vielleicht wäre es möglich, statt der einzelnen IDs mit einer Klasse zu arbeiten und darauf das draggable anzuwenden. Die Funktion coordinates hat ja schon die ID als Eingangsparameter und statt die Selektoren zu generieren, könnte man das Element übergeben:

$(function(){
var a = 1;
var coordinates = function(element) {
    id = element.attr('id');   
    var top = element.position().top;
    var left = element.position().left;
    $(id + 'X').val('' + left );
    $(id + 'Y').val('' + top );
    $(id + 'Z').val('' + a );
    element.css('z-index', a++);
}
$('.klasse_deiner_elemente').draggable({
containment: \"#window\",

start: function() {
 coordinates($(this));
},

stop: function() {
 coordinates($(this));
  }
});
});

Hoffe, dass $(this) das richtige Element angibt.

 

[Sempervivum]

PS: Fraglich, ob das mit $(this) funktioniert. Wahrscheinlich muss man ui heranziehen:

var coordinates = function(ui) {
    var id = ui.helper.attr('id');
    var top = ui.position.top;
    var left = ui.position.left;
    $('#' + id + 'X').val('' + left );
    $('#' + id + 'Y').val('' + top );
    $('#' + id + 'Z').val('' + a );
    ui.helper.css('z-index', a++);
}

und

start: function(event, ui) {
coordinates(ui);
},

 

[BartTotal]

werde mal beide sprobieren. Danke