HTML Drag and Drop List dengan JavaScript | Draggable List With Add Items

HTML Drag and Drop List dengan JavaScript | Draggable List With Add Items

HTML Drag and Drop List dengan JavaScript | Draggable List With Add Items
HTML Drag and Drop List dengan JavaScript | Draggable List With Add Items

Bagaimana kita bisa membuat daftar yang dapat diseret menggunakan JavaScript HTML CSS? - nah sobat ruangcoder artikel kali ini tentang HTML Drag and Drop List With JavaScript | Draggable List With Add Items  sama seperti hal nya waktu  Resize Table dengan menambah table tanpa menambahkan codingan Tr dan Td yang dapat sobat lihat disini nah begitu pula pada artikel kali ini yaitu berfungsi untuk memindahkan sebuah menu / daftar dengan cara drag and drop, maupun menambah menu baru, tanpa menambahkan sebuah codingan,

Jadi, Hari ini admin akan berbagi Cara Drag and Drop List dengan HTML dan JavaScript. Dimana menggunakan HTML 5 yang hadir dengan sebuah atribut terpisah untuk menentukan sebuah elemen yang nantinya dapat diseret ( drag ) atau tidak, dan dengan menggunakan Fungsi JS kita dapat membuat program berfungsi secara penuh untuk drag and dropnya. Di program yang nanti akan sobat buat telah admin tambahkan fungsi JavaScript murni, tidak menggunakan Library tambahan atau apapun itu. Sobat dapat menggunakan program ini pada proyek sobat, ini akan sangat berguna untuk sobat yang malas menambah item baru dengan menambahkan codingan.

Jika Sobat berpikir sekarang bagaimana sebenarnya program drag and drop ini, maka lihat pratinjau yang admin berikan di bawah ini.

Preview Program


HTML Drag and Drop List dengan JavaScript | Draggable List With Add Items 

Sebelum admin membagikan source code, mari kita bahas, Pertama, admin telah membuat teks dengan placeholder. Setelah itu, admin membuat daftar dengan elemen yang bernama class dan HTML draggable. Pada dasarnya, atribut HTML draggable = "true" mendefinisikan item yang dapat diseret atau tidak, itulah sebabnya admin menambahkan atribut ini.

Nah untuk selanjutnya admin menggunakan CSS admin telah menempatkan semua elemen di tempat yang tepat tentunya, seperti yang sobat lihat di preview program. Untuk menempatkan ikon add, admin menggunakan tanda +.

Yang terakhir adalah membuat fungsinya dimana admin membuat fungsinya menggunakan JavaScript, dimana untuk menangani fitur utama dari program yang kita akan buat, dari menambahkan item, serta fungsi drag and dropnya, Admin telah menambahkan menggunakan dokumen JS. dari perintah querySelector yang akan menciptakan sebuah fitur drag and drop menggunakan perintah dragstart drageneter dragover dragleave drop dragend

Admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, sobat hanya memerlukan 3 file. Pertama untuk HTML, kedua untuk CSS, dan yang ketiga untuk JavaScript. Ikuti Langkah - Langkahnya  untuk membuat programnya.
Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!-- Code By RuangCoder ( https://www.ruangcoder.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop List | ruangcoder.com</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <h1>DRAG AND DROP</h1>
  <div class="list">
    <input type="text" class="input" placeholder="Add items in your list"/>
    <span class="add">+</span>
  </div>
  <ul>
    <li class="draggable" draggable="true">HTML</li>
    <li class="draggable" draggable="true">CSS</li>
    <li class="draggable" draggable="true">JavaScript</li>
    <li class="draggable" draggable="true">PHP</li>
    <li class="draggable" draggable="true">MySQL</li>
  </ul>

  <script  src="function.js"></script>

</body>
</html>


Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
@import url("https://fonts.googleapis.com/css?family=Raleway:300,800");
body {
  background-color: #53a8e6;
}
body h1 {
  text-align: center;
  font-family: "Raleway", sans-serif;
  color: white;
  font-size: 50px;
  font-weight: normal;
}
body .list {
  position: relative;
  width: 250px;
  margin: 0px auto;
  display: block;
}
body .list ::-webkit-input-placeholder {
  color: #cecece;
}
body .list .input {
  outline: none;
  border: 1px solid white;
  background-color: #53a8e6;
  color: white;
  height: 50px;
  width: 250px;
  padding-left: 10px;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-left: -5px;
}
body .list span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.8;
  cursor: pointer;
  transition: all 200ms;
  color: white;
  will-change: transform;
}
body .list span:hover {
  transform: rotate(180deg);
}
body ul {
  padding: 0px;
}
body ul .draggable {
  will-change: transform;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  height: 50px;
  list-style-type: none;
  margin: 10px;
  background-color: white;
  color: #212121;
  width: 250px;
  line-height: 3.2;
  padding-left: 10px;
  cursor: move;
  transition: all 200ms;
  user-select: none;
  margin: 10px auto;
  position: relative;
}
body ul .draggable:after {
  content: 'drag me';
  right: 7px;
  font-size: 10px;
  position: absolute;
  cursor: pointer;
  line-height: 5;
  transition: all 200ms;
  transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.5);
  transform: translateX(120%);
  opacity: 0;
}
body ul .draggable:hover:after {
  opacity: 1;
  transform: translate(0);
}

.over {
  transform: scale(1.1, 1.1);
}


Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder( https://www.ruangcoder.com )
var btn = document.querySelector('.add');
var remove = document.querySelector('.draggable');

function dragStart(e) {
  this.style.opacity = '0.4';
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
};

function dragEnter(e) {
  this.classList.add('over');
}

function dragLeave(e) {
  e.stopPropagation();
  this.classList.remove('over');
}

function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  return false;
}

function dragDrop(e) {
  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
  return false;
}

function dragEnd(e) {
  var listItens = document.querySelectorAll('.draggable');
  [].forEach.call(listItens, function(item) {
    item.classList.remove('over');
  });
  this.style.opacity = '1';
}

function addEventsDragAndDrop(el) {
  el.addEventListener('dragstart', dragStart, false);
  el.addEventListener('dragenter', dragEnter, false);
  el.addEventListener('dragover', dragOver, false);
  el.addEventListener('dragleave', dragLeave, false);
  el.addEventListener('drop', dragDrop, false);
  el.addEventListener('dragend', dragEnd, false);
}

var listItens = document.querySelectorAll('.draggable');
[].forEach.call(listItens, function(item) {
  addEventsDragAndDrop(item);
});

function addNewItem() {
  var newItem = document.querySelector('.input').value;
  if (newItem != '') {
    document.querySelector('.input').value = '';
    var li = document.createElement('li');
    var attr = document.createAttribute('draggable');
    var ul = document.querySelector('ul');
    li.className = 'draggable';
    attr.value = 'true';
    li.setAttributeNode(attr);
    li.appendChild(document.createTextNode(newItem));
    ul.appendChild(li);
    addEventsDragAndDrop(li);
  }
}

btn.addEventListener('click', addNewItem);

Sekarang Sobat telah berhasil membuat Drag and Drop List HTML Dengan JavaScript, Draggable List With Add Items . Jika Sobat memiliki keraguan atau komentar di bawah.

 Terima kasih telah mengunjungi, dan terus berkunjung.

Anda mungkin menyukai postingan ini