HTML, CSS dan jQuery: Panduan teknikal untuk melaksanakan pengisihan drag-and-drop-tutorial js-php.cn

HTML, CSS dan jQuery: Panduan teknikal untuk melaksanakan pengisihan drag-and-drop

PHPz

Lepaskan： 2023-10-24 08:12:26

asal

825 orang telah melayarinya

HTML, CSS dan jQuery: Panduan teknikal untuk melaksanakan pengisihan drag-and-drop

HTML, CSS dan jQuery: Panduan Teknikal untuk Melaksanakan Isih Seret dan Lepas

Dalam reka bentuk web moden, isihan seret dan lepas ialah ciri yang sangat biasa. Ia membolehkan pengguna mengisih dengan menyeret elemen, dan memberikan pengalaman pengguna yang baik semasa kemas kini masa nyata. Artikel ini akan memperkenalkan anda cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi pengisihan seret dan lepas yang mudah.

Sebelum kita bermula, kita perlu menyediakan beberapa struktur HTML asas dan gaya CSS, yang akan menyediakan asas untuk pengisihan seret dan lepas kita yang seterusnya.

Struktur HTML:

<ul id="sortable">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
</ul>

Salin selepas log masuk

Gaya CSS:

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sortable li {
  cursor: move;
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

Salin selepas log masuk

Seterusnya, kami perlu memperkenalkan perpustakaan jQuery dan beberapa pemalam UI jQuery, yang akan memberikan sokongan yang diperlukan untuk kami melaksanakan pengisihan seret dan lepas. Masukkan kod berikut ke dalam teg <head> halaman web: <head>标签中插入以下代码：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Salin selepas log masuk

现在，我们已经准备好了一切必要的代码、库和插件，我们可以开始实现拖拽排序了。

首先，我们需要使用jQuery UI的sortable()方法来使列表可拖拽排序。在JavaScript代码中插入以下代码：

$(document).ready(function() {
  $("#sortable").sortable();
});

Salin selepas log masuk

接下来，我们需要为排序完成后的事件添加一个回调函数，以便能够在列表排序变化时获取更新后的排序结果。修改JavaScript代码如下：

$(document).ready(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var sortedIDs = $(this).sortable("toArray");
      console.log(sortedIDs);
    }
  });
});

Salin selepas log masuk

在这段代码中，我们使用jQuery UI的toArray()方法获取排序后的列表项的ID，并将其打印到控制台上。您可以根据实际需求对排序结果进行进一步的处理，比如将排序结果进行保存或者更新界面的显示。

最后，为了增加交互性，我们可以在排序时添加一些动画效果。修改JavaScript代码如下：

$(document).ready(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var sortedIDs = $(this).sortable("toArray");
      console.log(sortedIDs);
    }
  }).disableSelection();
});

Salin selepas log masuk

在这段代码中，我们使用了jQuery UI的disableSelection()方法来禁止列表项的文本被选中。

至此，我们已经完成了一个简单的拖拽排序功能的实现。您可以根据自己的需求来进行样式调整和功能扩展，比如添加删除、编辑等功能。

总结：
本文提供了一个使用HTML、CSS和jQuery来实现拖拽排序的实例。通过使用jQuery UI的sortable()rrreee

Sekarang kami telah menyediakan semua kod, perpustakaan dan pemalam yang diperlukan, kami boleh mula melaksanakan seret dan lepas menyusun.

Pertama, kita perlu menggunakan kaedah sortable() jQuery UI untuk menjadikan senarai boleh diseret dan diisih. Masukkan kod berikut dalam kod JavaScript: 🎜rrreee🎜 Seterusnya, kita perlu menambah fungsi panggil balik untuk acara selepas pengisihan selesai, supaya kita boleh mendapatkan hasil pengisihan yang dikemas kini apabila pengisihan senarai berubah. Ubah suai kod JavaScript seperti berikut: 🎜rrreee🎜Dalam kod ini, kami menggunakan kaedah toArray() jQuery UI untuk mendapatkan ID item senarai yang diisih dan mencetaknya ke konsol. Anda boleh memproses lagi hasil pengisihan mengikut keperluan sebenar, seperti menyimpan hasil pengisihan atau mengemas kini paparan antara muka. 🎜🎜Akhir sekali, untuk menambah interaktiviti, kita boleh menambah beberapa kesan animasi semasa menyusun. Ubah suai kod JavaScript seperti berikut: 🎜rrreee🎜Dalam kod ini, kami menggunakan kaedah disableSelection() jQuery UI untuk menghalang teks item senarai daripada dipilih. 🎜🎜Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi pengisihan seret dan lepas yang mudah. Anda boleh melaraskan gaya dan mengembangkan fungsi mengikut keperluan anda sendiri, seperti menambah pemadaman, penyuntingan dan fungsi lain. 🎜🎜Ringkasan:
Artikel ini menyediakan contoh penggunaan HTML, CSS dan jQuery untuk melaksanakan pengisihan seret dan lepas. Dengan menggunakan kaedah sortable() jQuery UI, kami boleh melaksanakan pengisihan seret dan lepas senarai dengan mudah, dan selepas pengisihan selesai, kami boleh mendapatkan hasil yang diisih dengan mudah. Saya harap artikel ini akan membantu anda memahami proses pelaksanaan pengisihan seret dan lepas. 🎜🎜Contoh kod: https://codepen.io/pen/?template=WNRZebr🎜

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Panduan teknikal untuk melaksanakan pengisihan drag-and-drop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!