Basit Sürükle Bırak Uygulaması
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
float:left;
width:150px;
height:150px;
margin:20px;
padding: 10px;
border: 1px solid #a4a4a4;
}
</style>
<script>
function Surukle(Olay) {
Olay.dataTransfer.setData("text", Olay.target.id);
}
function UzerineBirakabilsin(Olay) {
Olay.preventDefault();
}
function Biraklinca(Olay) {
UzerineBirakabilsin(Olay);
var SuruklenenVeri = Olay.dataTransfer.getData("text");
Olay.target.appendChild(document.getElementById(SuruklenenVeri));
}
</script>
</head>
<body>
<div id="Bir" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<div id="Iki" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<div id="Uc" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<div id="Dort" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<img src="https://bestanimations.com/media/butterflys/315739394butterfly-animated-gif-44.gif" style="width:100px; height: 90px" draggable="true" ondragstart="Surukle(event)" id="Kelebek"/>
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
float:left;
width:150px;
height:150px;
margin:20px;
padding: 10px;
border: 1px solid #a4a4a4;
}
</style>
<script>
function Surukle(Olay) {
Olay.dataTransfer.setData("text", Olay.target.id);
}
function UzerineBirakabilsin(Olay) {
Olay.preventDefault();
}
function Biraklinca(Olay) {
UzerineBirakabilsin(Olay);
var SuruklenenVeri = Olay.dataTransfer.getData("text");
Olay.target.appendChild(document.getElementById(SuruklenenVeri));
}
</script>
</head>
<body>
<div id="Bir" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<div id="Iki" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<div id="Uc" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<div id="Dort" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
<img src="https://bestanimations.com/media/butterflys/315739394butterfly-animated-gif-44.gif" style="width:100px; height: 90px" draggable="true" ondragstart="Surukle(event)" id="Kelebek"/>
</body>
</html>
Yorumunuzu Ekleyin