jquery+bootstrap+html实现拖拽组装横向树结构

这篇文章距离上次修改已过186天，其中的内容可能已经有所变动。

要使用jQuery和Bootstrap实现横向树结构的拖拽组装，你可以使用jQuery UI的sortable功能来实现节点的拖动，以及Bootstrap的网格系统来创建树的布局。以下是一个简单的实现示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree Drag and Drop</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .draggable-container { list-style-type: none; margin: 0; padding: 0; }
        .draggable-container li { cursor: move; margin-top: 10px; }
    </style>
</head>
<body>
 
<div class="container">
    <div class="row">
        <div class="col-6 border">
            <ul class="draggable-container">
                <li class="draggable-item">Item 1</li>
                <li class="draggable-item">Item 2</li>
                <li class="draggable-item">Item 3</li>
                <!-- More list items -->
            </ul>
        </div>
        <div class="col-6 border">
            <ul class="d-flex flex-row draggable-container">
                <!-- Initially empty -->
            </ul>
        </div>
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></js>
<script>
    $(function() {
        $(".draggable-container").sortable({
            connectWith: ".draggable-container",
            axis: "x"
        });
    });
</script>
</body>
</html>

在这个例子中，我们使用了Bootstrap的网格系统来创建两列，其中左列包含可拖动的元素，右列用于放置已拖动的元素。jQuery UI的sortable方法被用来使列表项可拖动，并通过connectWith选项来指定可以拖动的容器。axis选项限制了拖动只能在横向上进行。

jquery+bootstrap+html实现拖拽组装横向树结构

评论已关闭

推荐阅读