How to use Layui to implement draggable tab component functionality

How to use Layui to implement the draggable tab component function

Layui is a lightweight front-end UI framework that provides rich components and convenient API makes front-end development simpler and more efficient. Among them, the tab component is one of the commonly used functions in Layui. In actual development, we often encounter the need to drag and drop tabs to sort or drag to transpose them. This article will introduce how to use Layui to implement the draggable tab component function in the form of examples.

First, we need to introduce Layui related resource files, including layui.js and layui.css, as well as the jQuery library. These resource files can be obtained from Layui's official website or other sources.

Next, we create a container containing tabs according to actual needs, and add the drag-and-drop sorting function to the container. The following is a sample code:

<div class="layui-tab layui-tab-card" lay-filter="tab-demo">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
    <li>选项卡4</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">选项卡1的内容</div>
    <div class="layui-tab-item">选项卡2的内容</div>
    <div class="layui-tab-item">选项卡3的内容</div>
    <div class="layui-tab-item">选项卡4的内容</div>
  </div>
</div>

In the above code, we use Layui's tab component and assign a unique filter lay-filter to the container for subsequent operations. At the same time, we added a class name layui-this to each tab, indicating the currently selected tab. In actual development, we can dynamically generate tabs and add corresponding content.

Next, we need to add the drag and drop sorting function. Layui does not directly provide drag-and-drop sorting components. We can use other plug-ins to achieve this function. Here, we use the jquery-ui plug-in to achieve the drag-and-drop sorting effect. First, we need to introduce the resource file of jquery-ui. In the Layui module, it can be dynamically loaded through the layui.use() method:

<script>
layui.use(['jquery', 'element'], function(){
  var $ = layui.jquery, element = layui.element;

  // 拖拽排序
  $(".layui-tab-title").sortable({
    axis: "x",  // 限制只能在水平方向拖拽
    cursor: "move",  // 设置拖拽时的鼠标样式
    containment: "parent",  // 限制拖拽范围在父容器内
    update: function(event, ui) {
      // 获取拖拽排序后的选项卡顺序
      var order = $(this).sortable("toArray");

      // 更新选项卡内容的顺序
      var $content = $(".layui-tab-content .layui-tab-item");
      for (var i = 0; i < order.length; i++) {
        $content.eq(i).appendTo(".layui-tab-content").show();
      }

      // 更新选项卡的位置
      $(this).sortable("cancel");
    }
  });
});
</script>

In the above code, we use jQuery’s sortable() method Drag and drop to sort tab titles. Specific sorting effects are achieved by setting some parameters and callback functions. In the update callback function, we obtain the tab order after drag and drop sorting, and update the content and position of the tabs according to the order. Finally, we call the cancel function of the sortable() method to cancel the original sorting effect to maintain the style and functionality of Layui.

Through the above steps, we have successfully implemented the draggable tab component function using Layui. In actual projects, we can customize effects and styles according to our own needs, and combine them with other components and APIs provided by Layui to achieve richer and more flexible functions.

To summarize, this article introduces how to use Layui to implement the draggable tab component function. By introducing Layui's related resource files and combining it with the jquery-ui plug-in, we can easily implement drag-and-drop sorting and transposition functions. This provides more possibilities and convenience for our front-end development. I hope this article is helpful to everyone, thank you for reading.

The above is the detailed content of How to use Layui to implement draggable tab component functionality. For more information, please follow other related articles on the PHP Chinese website!