Basit bir " HTML/JS " sorusu, eminim sizler için çerez :)

15-01-2023, 15:30:27

Merhabalar,
Bu linkteki kodları kullanarak işlem yapıyorum.
Divleri çoklamak istiyorum. Yani kırmızı ile işaretlediğim divden 15-20 tane yapmak istiyorum.
Kopyala yapıştır yaptığımda hareket kabiliyeti bitiyor. Sürüklenebilir olması gerekli.

Bunu nasıl yapabilirim acaba?

https://www.w3schools.com/howto/tryi...w_js_draggable

15-01-2023, 15:42:13

#2

EmreUnl

Merhaba hocam arasına <br> koyarak deneyebilirmisin

15-01-2023, 15:44:38

#3

dijitalartiz

EmreUnl adlı üyeden alıntı: mesajı görüntüle

Merhaba hocam arasına <br> koyarak deneyebilirmisin

br koyarak yaptığımda böyle oluyor.
Sadece arkadaki kartı hareket ettirebiliyorum hocam.

15-01-2023, 15:45:16

#4

celalyesil

Çok basit hocam bu alanı çoğaltın,

Buraya yeni div isimlerini virgül koyarak ekleyin çalışıyor.

15-01-2023, 15:49:33

#5

dijitalartiz

EmreUnl adlı üyeden alıntı: mesajı görüntüle

Merhaba hocam arasına <br> koyarak deneyebilirmisin

celalyesil adlı üyeden alıntı: mesajı görüntüle

Çok basit hocam bu alanı çoğaltın,

Buraya yeni div isimlerini virgül koyarak ekleyin çalışıyor.

Her ikinize ayrı ayrı teşekkür ederim.
Sorun son arkadaşın attığı yorumla çözüldü. Çok çok teşekkürler. Tasarımla alakalı bir desteğe ihtiyacınız olur ise PM atmanız yeterli.

Sevgiler,

15-01-2023, 15:54:13

#6

tuzlatuning

Çözümü yazmaya gelmiştim fakat @celalyesil; hızlı davranmış.

15-01-2023, 16:13:23

#7

dijitalartiz

tuzlatuning adlı üyeden alıntı: mesajı görüntüle

Çözümü yazmaya gelmiştim fakat @celalyesil; hızlı davranmış.

Size de çok teşekkür ederim hocam. Çok ama çok sağ olun.

15-01-2023, 19:58:21

#8

dijitalartiz

celalyesil adlı üyeden alıntı: mesajı görüntüle

Çok basit hocam bu alanı çoğaltın,

Buraya yeni div isimlerini virgül koyarak ekleyin çalışıyor.

celalyesil adlı üyeden alıntı: mesajı görüntüle

Çok basit hocam bu alanı çoğaltın,

Buraya yeni div isimlerini virgül koyarak ekleyin çalışıyor.

tuzlatuning adlı üyeden alıntı: mesajı görüntüle

Çö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>&nbsp;</h1>

<p>&nbsp;</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&uuml;ş&uuml;k
<br>
  <br>
  <strong>Re&ccedil;eteleme D&uuml;zeyi </strong><br>
Y&uuml;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&uuml;ş&uuml;k
<br>
  <br>
  <strong>Re&ccedil;eteleme D&uuml;zeyi </strong><br>
Y&uuml;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>