How can the drag-and-drop functionality in layui be implemented?

2 years ago
Liam
2 minutes

To achieve the feature of dragging components, you can utilize the official drag-and-drop component lay.drag of layui.

Firstly, the relevant files of the layui library and the lay drag component need to be introduced.

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>

Next, utilize the drag and drop feature of the lay drag component.

<div id="draggable" class="layui-layer layui-layer-drag">
  <!-- 拖拽的内容 -->
</div>

layui.use(['layer', 'laydate'], function(){
  var layer = layui.layer;
  
  // 拖拽功能
  $('#draggable').draggable();
});

The element with the ID #draggable needs to have drag functionality implemented, while .layui-layer-drag is the default drag style class provided by layui.

By using the above code, it is possible to achieve the functionality of dragging components. You can drag and drop the #draggable element by clicking and dragging the mouse.

Please note that the above code contains the drag-and-drop feature of jQuery UI, so you need to include the necessary jQuery and jQuery UI files. If you have already included jQuery and jQuery UI, you can skip the import code.

It should be noted that the above code only provides basic drag and drop functionality. If more complex features are needed, such as limiting the drag and drop range or triggering events during drag and drop, you can refer to the drag and drop documentation of jQuery UI for the appropriate configuration and operations.

bannerAds