Zeig doch erstmal den Code , was du schon geschrieben hast .
Verschieben über Maus?
Du meinst sicherlich Drag-and-drop oder ?
Verschieben über Variable verstehe ich Z. B. so
<style>
#bild{
position:absolute;
left:0;
}
</style>
<div id="bild">hhhhhhhhhhhhhhh</div>
<script>
function schieben(a,b){
let ele=document.getElementById('bild');
setTimeout(function(){
if(a<=b){
ele.style.left=a+'px';
a++;
schieben(a,b)
}
},100)
}
schieben( 0,200)
</script>Guten Morgen Knausbaer, Flask/Python ist ja serverseitig. Ich verstehe dich jetzt so, dass diese Variable sich im Betrieb ändert und Du die Position auf Grund der Variablen laufend neu festlegen willst. In dem Fall müsstest Du die Variable mit Ajax immer neu vom Server holen.
Edit: Oder gibt die Variable den Endwert an, wohin der Kreis verschoben werden soll?
Guten Morgen,
genau! So meine ich das. 
Zum besseren verständnis:
Ich messe den Abenstand von einen Portalkran mittels Laser zur Hallenwand (per SPS). Die Werte werden auch sauber via OPCUA übergeben und in meiner Webseite Angezeigt. Jetzt will ich jedoch noch eine "Live Visualisierung" machen, d.h. ich möchte mir eine Skizze malen und darauf den Kran dynamisch hin und her fahren lassen, je nachdem wie weit er von der Hallenwand (Wert der Variable) entfernt ist.
Liebe Grüße
OK, dann brauchst Du eine Webseite, die nur den Wert dieser Variablen ausgibt und sonst nichts. Da Du schreibst X und Y würde sich die Kodierung in JSON anbieten, d. h. Du müsstest dies ausgeben:
{"x": 124, "y": 248}
Holen dann über Ajax, z. B. mit fetch:
fetch('position.json',).then(res => {
return res.json();
}).then(res => {
console.log(res);
// Jetzt stehen x und y in dekodierter Form
// im Parameter res zur Verfuegung:
console.log(res.x);
console.log(res.y);
});Besten Dank, dann werde ich das am Montag testen & mich melden!!
Schönes Wochenende schonmal!
Wünsche ebenfalls ein schönes Wochenende!
Das zweite Javascript macht nicht so wirklich Sinn. Dies:
{"x": 124, "y": 248}
muss vom Server zurück gegeben werden.
Wenn ich mir das erste Skript ansehe, sieht das aber schon recht viel versprechend aus. Es gibt offenbar eine Info data.posKran die die Position des Krans angibt. Allerdings scheint das nur ein Wert zu sein, während Du früher von x und y geschrieben hast. Wie verhält es sich damit?
Als ersten Ansatz für eine Animation versuche dieses:
<img id="img-kran" src="{{ url_for('static', filename='Flasche.png') }}" width="120" height="120" style="position:absolute;"/>
<script type="text/javascript">
var intervalID = setInterval(update_values,1000);
function update_values() {
$.getJSON($SCRIPT_ROOT + '/stuff4',
function(data) {
$('#zeit_PLC').text(data.zeit_PLC);
$('#posKran').text(data.posKran);
$('#posKatze').text(data.posKatze);
$('#posHaHu').text(data.posHaHu);
$('#posHiHu').text(data.posHiHu);
$('#img-kran').style.left = data.posKran + 'px';
});
};
</script>Dann müsste sich das Bild eigentlich schon bewegen. Wenn nicht, wirf einen Blick in die Console, ob Fehlermeldungen zu sehen sind.
PS: Ich komme doch immer wieder mit Vanilla-JS und jQuery durcheinander 
Die Zeile für das Positionieren muss so aussehen:
$('#img-kran').css('left', data.posKran + 'px');
Dann vermute ich, dass an dem Wert von data.posKran noch eine Maßeinheit daran hängt und es kein Integer ist. Was wird denn in #posKran genau ausgegeben?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!