Legen Sie die neue Objektposition beim Klicken auf die Schaltfläche fest?

Question

Ich versuche herauszufinden, den Standort eines Objekts auf dem Bildschirm zu ändern, wenn jemand auf eine Schaltfläche klickt. Zum Beispiel sollte Bild 1 auf {'x': '300', 'y': '200'} verschoben werden, wenn auf eine Schaltfläche geklickt wird.

Irgendwelche Vorschläge? Danke!

Answer 1

Da Sie die folgenden in Ihrem HTML-Layout haben:

<button id="button1">Click</button> 
<img src="..." id="image1" /> 

Sie so etwas wie dies in einer Skriptdatei (reine JavaScript) tun können:

var button1 = document.getElementById("button1"); 
var image1 = document.getElementById("image1"); 

button1.click = function() 
{ 
    image1.style.position = "absolute"; 
    image1.style.top = "300px"; 
    image1.style.left = "200px"; 
}; 

oder mit jQuery/Zepto.js :

$(function() 
{ 
    $("#button1").on("click", function() 
    { 
     $("#image1").css({position: "absolute", top: "300px", left: "200px"}); 
    }); 
}); 

Answer 2

$(".btn").on ("click", function() { 
    $(".image1").css({top: 300px, left: 200px}); 
}); 

Dies sollte den Trick