✔ Position von Draggable elementen ausgeben

[BartTotal]

Hallo
Für ein Spiel habe ich ein Feld mit mehreren verschiebbaren Elementen. Die Position sollte über versteckte inputs in die Datenbank gespeichert werden.

Daher brauche ich die Position jeden einzelnen draggablen Elements.
Bei meinem Beispiel gibt es nur 1 Element aus, doch sobald es 2 sind gibt es nur die Position von 1 aus :S kann mir jemand helfen dass es für jedes bewegliche Element die Position darunter ausgibt?

<style type='text/css'>

#$row->id {
position: absolute;
top: ".$row->top."px;
left: ".$row->left."px;
cursor: move;
}

#window {
    width: 100%;
    height: 600px;
}
  </style>


<script type='text/javascript'>

$(function(){
var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#input').val('LINKS: ' + left );
    $('#input1').val('TOP: ' + top );
}

$('#$row->id').draggable({ containment: \"#window\",
    start: function() {
        coordinates('#$row->id');
    },
    stop: function() {
        coordinates('#$row->id');
    }
});
});       



</script>

Einfach gesagt brauche ein bewegliches Element welches man in einem definierten feld bewegen kann. Dazu soll jedes Element seine Position direkt darunter zeigen.

Damit ich eine Art Pinnwand machen kann wo jeder user seine Postits bewegen kann und abspeichern muss ich die Position von jedem Postit kennen.

 

[jeipack]

Du gibst die Position ja in das input und input1 Feld aus:

• $('#input').val('LINKS: ' + left );

• $('#input1').val('TOP: ' + top );

Wie stellst du dir denn vor dass da zwei Werte angezeigt werden können? Resp. du überschreibst dies bei jedem Aufruf der Funktion wieder.
Du bräuchtest also innerhalb des Elements zwei Textfelder mit klassen, und dann füllst du diese für jedes Element einzeln ab (Indem du diese Klasse nur innerhalb dieses Elements suchst, jQuery Funktionen dafür wären .children oder .find)

 

[BartTotal]

Habs jetzt soweit hinbekommen

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#$row->id').draggable(
    {containment: \"#window\",
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#".$row->id."X').val('' + xPos);
            $('#".$row->id."Y').val('' + yPos);
        }
    });
});//]]> 

</script>

Das Problem mit diesem Code ist das die Koordinaten nicht mit dem style Position: top/left überreinstimmen. kann man da ihrendwie die coordinaten innerhalb vom div "window" nehmen und nicht vom Seitenanfang?


Bei diesem Code war das nämlich der fall:

<script type='text/javascript'>
$(function(){
var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#input').val('' + left );
    $('#input1').val('' + top );
}


$('#$row->id').draggable({ containment: \"#window\",
    start: function() {
        coordinates('#$row->id');
    },
    stop: function() {
        coordinates('#$row->id');
    }
});
});       

</script>

 

[BartTotal]

Weiss jemand weshalb das hier nicht funktioniert?

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

</script>

 

[jeipack]

Koordinaten nicht mit dem style Position: top/left überreinstimmen

Beim einten Code wird der Offset genommen, beim anderen die Position.
offset ist die Position relativ zum Dokument, wärend position die Position relativ zum Parent-Element mit einer gesetzen position ist (position: absolute, position: relative)

Für ein Spiel habe ich...

Da du anscheinend selbst ein Spiel entwickeln willst - und ich will dir damit nicht zu nahe treten - wäre es doch gut zu versuchen den Code den du Copy&Past zu lesen und zu verstehen.

 

[BartTotal]

Habs soweit ja zum laufen gebacht,

<script type='text/javascript'>
$(function(){
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').draggable({
   containment: \"#window\",
   start: function() {
       coordinates('#$row->id');
   },
   stop: function() {
       coordinates('#$row->id');
   }
});
});     
</script>

Nun stehe ich eigentlich vor dem letzten Problem was nicht gehen will.
Es soll das angeklickte draggable element immer mit der höchsten z-index zahl versehen, und die z-index zahl soll es auch in einem Input feld ausgeben

http://jsfiddle.net/LQ4JT/7/ - Hier wird das eigentlich genau so gemacht nur habe ich wie gesagt null ahnung

 

[BartTotal]

Weiss jemand wie ich die Funktion richtig einbinden muss?
$(this).css("z-index", a++);

 

[jeipack]

Bei jQuery.css() werden keine Bindestiche angenommen. Du musst alles was einen Bindestich hat in CamelCase schreiben, also so:
$(this).css("zIndex", a++)

 

[Parantatatam]

For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" ).

 

[BartTotal]

okey. aber das problem habe ich ja nicht oder?