91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

js sortable能實現跨列表拖拽嗎

js
小樊
87
2024-10-23 02:00:09
欄目: 編程語言

JavaScript Sortable庫本身不支持跨列表拖拽。但是,您可以結合其他庫(如Sortable.js和Gridstack.js)來實現跨列表拖拽的功能。

這里是一個使用Sortable.js和Gridstack.js實現跨列表拖拽的示例:

  1. 首先,確保在您的項目中包含了Sortable.js庫。您可以使用CDN鏈接或者下載到本地。
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  1. 接下來,引入Gridstack.js庫及其CSS樣式。您可以使用CDN鏈接或者下載到本地。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.js"></script>
  1. 在HTML中創建兩個列表(使用<ul>元素)和多個可拖拽的元素(使用<li>元素)。
<ul class="list-container" id="list1">
  <li class="item" data-id="1">Item 1</li>
  <li class="item" data-id="2">Item 2</li>
  <li class="item" data-id="3">Item 3</li>
</ul>

<ul class="list-container" id="list2">
  <li class="item" data-id="4">Item 4</li>
  <li class="item" data-id="5">Item 5</li>
  <li class="item" data-id="6">Item 6</li>
</ul>
  1. 使用JavaScript初始化Sortable對象和Gridstack對象。
const sortableList1 = new Sortable(document.getElementById('list1'), {
  animation: 150,
  onUpdate: function (event) {
    const item = event.item;
    const list = event.target;
    const targetIndex = Array.from(list.children).indexOf(item);
    const sourceIndex = Array.from(list.children).indexOf(item.previousSibling);

    if (sourceIndex > targetIndex) {
      list.insertBefore(item, list.children[targetIndex]);
    } else {
      list.insertBefore(item, list.children[targetIndex + 1]);
    }
  },
});

const gridstack = Gridstack.init({
  element: '#grid',
  columnWidth: 100,
  rowHeight: 100,
  autoPosition: true,
});
  1. 將可拖拽的元素添加到Gridstack對象中,并設置它們的xywidth屬性。
const items = document.querySelectorAll('.item');
items.forEach((item) => {
  const x = Math.floor(Math.random() * 3);
  const y = Math.floor(Math.random() * 3);
  const width = 1;
  const height = 1;

  gridstack.add_item(item, x, y, width, height);
});

現在,您應該可以在兩個列表之間拖拽元素了。請注意,這個示例僅用于演示目的,您可能需要根據您的需求進行調整。

0
徐闻县| 浦江县| 伊宁市| 始兴县| 定结县| 田东县| 莒南县| 茌平县| 怀来县| 哈巴河县| 潮安县| 彭泽县| 台中市| 阿城市| 长宁区| 察雅县| 东明县| 璧山县| 且末县| 大城县| 修文县| 山阳县| 齐齐哈尔市| 恭城| 宣恩县| 昆明市| 镇平县| 张掖市| 浙江省| 义乌市| 多伦县| 新泰市| 商河县| 龙门县| 秦皇岛市| 赤城县| 团风县| 璧山县| 巢湖市| 嘉峪关市| 山东省|