Çok basit hocam bu alanı çoğaltın,
Buraya yeni div isimlerini virgül koyarak ekleyin çalışıyor.
Çok basit hocam bu alanı çoğaltın,
Buraya yeni div isimlerini virgül koyarak ekleyin çalışıyor.
Çözümü yazmaya gelmiştim fakat
@celalyesil; hızlı davranmış.
Sizi tekrar rahatsız ediyorum fakat bu seferde input alanında sorun yaşadım.
Aşağıda paylaştığım kodları "
https://www.w3schools.com/howto/tryi...w_js_draggable " bu sitede test edebilir misiniz? Sayı girmeye çalıştığımda giriş yapmama izin vermiyor.
Kodlar:
<!DOCTYPE html>
<html>
<style>
#mydiv, #mydiv2 {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
width: 183px;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
body {
background-image: url(test.png);
background-repeat: no-repeat;
}
.style4 {font-family: Arial, Helvetica, sans-serif}
</style>
<body>
<h1> </h1>
<p> </p>
<div id="mydiv">
<div class="style4" id="mydivheader"><strong>Hekim:</strong> Emir Taş</div>
<p class="style4"><strong>Toplam Hasta Sayısı</strong><br>
Yüksek<br>
<br>
<strong>İlgili Endikasyondaki Hasta Sayısı </strong><br>
Düşük
<br>
<br>
<strong>Reçeteleme Düzeyi </strong><br>
Yüksek</p>
<br>
<form>
<span class="style4">Hedef Ziyaret </span>
<input type="text" name="username">
<br>
<br>
<span class="style4">Sunum</span>
<input type="text" name="username">
<br>
<br>
<span class="style4">Kongre</span>
<input type="text" name="username"><br>
<form>
<input type="checkbox" name="kutu1" checked="OFF">
<span class="style4">HEDEFLİ</span><br>
</form>
</form><br>
</div><br>
<div id="mydiv2">
<div class="style4" id="mydivheader"><strong>Hekim:</strong> Emir Taş</div>
<p class="style4"><strong>Toplam Hasta Sayısı</strong><br>
Yüksek<br>
<br>
<strong>İlgili Endikasyondaki Hasta Sayısı </strong><br>
Düşük
<br>
<br>
<strong>Reçeteleme Düzeyi </strong><br>
Yüksek</p>
<br>
<form>
<span class="style4">Hedef Ziyaret </span>
<input type="text2" name="username2">
<br>
<br>
<span class="style4">Sunum</span>
<input type="text3" name="username3">
<br>
<br>
<span class="style4">Kongre</span>
<input type="text" name="username4"><br>
<form>
<input type="checkbox" name="kutu15" checked="OFF">
<span class="style4">HEDEFLİ</span><br>
</form>
</form>
</div>
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
dragElement(document.getElementById("mydiv2"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>