📌  相关文章
📜  jQWidgets jqxSortable connectWith 属性(1)

📅  最后修改于: 2023-12-03 15:32:19.800000             🧑  作者: Mango

jQWidgets jqxSortable connectWith属性

jQWidgets jqxSortable是一个jQuery插件，用于使元素可排序。connectWith是其一个属性，用来连接多个元素，使它们可以互相拖放。本篇文章将对connectWith属性进行详细介绍。

connectWith属性

connectWith属性是一个字符串类型，用于指定待连接的元素的选择器。表示在同一组中的元素可以通过拖动在不同的可排序列表之间进行排序。

语法
$('#sortable1, #sortable2').jqxSortable({
    connectWith: '.connectedSortable'
});

上面的代码中，选择ID为sortable1和sortable2的元素，同时将它们连接到class为connectedSortable的元素。

示例

以下是一个例子，演示如何使用connectWith实现两个列表之间的拖放排序。

<!DOCTYPE html>
<html>
<head>
    <title>Sortable connectWith Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxsortable.js"></script>
</head>
<body>
    <h2>Sortable connectWith Demo</h2>
    <div class="sortable1 connectedSortable">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <div class="sortable2 connectedSortable">
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
    <script>
        $('.connectedSortable').jqxSortable({
            connectWith: '.connectedSortable'
        });
    </script>
</body>
</html>
效果

Sortable connectWith Demo

总结

connectWith是jQWidgets jqxSortable插件中的一个属性，可以连接多个可排序的元素，使它们可以互相拖拽排序，实现更加灵活的界面交互。其语法简单，容易上手。希望本文对您有所帮助。