博客

jQWidgets jqxSortable connectWith属性

  • Post category:jquery

jQWidgets jqxSortable是一个基于jQuery和jQWidgets库的排序插件。他能够允许你更新和移动一组HTML元素，支持嵌套、拖动滚动条等多种特性。其中，connectWith属性是jqxSortable比较有趣的一个属性，它能实现两个sortable控件之间的连接和交互。

具体来说，connectWith属性定义了一个jqxSortable要连接的另一个jqxSortable的选择器，它允许两个sortable控件在拖动元素时，元素能够进行交换，被连接的sortable控件会被设置为droppable，并且接受位于源sortable控件中的任意拖动元素。

下面我们通过两个示例来进一步了解connectWith属性的使用。

示例1：基本使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>connectWith示例1</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.fresh.css">
</head>
<body>
  <h3>可互相连接的jqxSortable控件</h3>
  <div id="sortable-list-1" class="sortable-container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>
  <div id="sortable-list-2" class="sortable-container">
    <div class="item">item 3</div>
    <div class="item">item 4</div>
  </div>
  <script>
    $(document).ready(function () {
      $('.sortable-container').jqxSortable({
        connectWith: '.sortable-container'
      });
    });
  </script>
</body>
</html>

在这个例子中，我们定义了两个id分别为sortable-list-1和sortable-list-2的div，他们都有类名为sortable-container。我们希望这两个div能够进行拖拽排序，且能够互相连接（即将拖动元素从一个div放到另一个div中）。 我们在JS代码中调用了jqxSortable()方法来启用插件，并且传入了connectWith:’.sortable-container’来表示要连接的sortable控件的选择器。这样就实现了一个简单的connectWith效果。

示例2：拖动克隆元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>connectWith示例2</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.fresh.css">
  <style>
    .sortable-container {
      border: 1px solid #ccc;
      float: left;
      margin-right: 10px;
      padding: 10px;
    }
    .sortable-container .item {
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      padding: 5px;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <h3>可互相连接的jqxSortable控件</h3>
  <div id="sortable-list-1" class="sortable-container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>
  <div id="sortable-list-2" class="sortable-container">
    <div class="item">item 3</div>
    <div class="item">item 4</div>
  </div>
  <script>
    $(document).ready(function () {

      $('.item').on('mousedown', function () {
        $(this).clone().appendTo('body').addClass('clone').show();
      });

      $('.sortable-container').jqxSortable({
        connectWith: '.sortable-container',
        filter: '.item',
        helper: function () {
          return $('<div>').addClass('dragged').append($('.clone').clone());
        },
        start: function (event) {
          $('.dragged').css({left: event.clientX, top: event.clientY});
        },
        stop: function () {
          $('.clone').remove();
          $('.dragged').remove();
        }
      });
    });
  </script>
</body>
</html>

在这个例子中，我们仍然定义了两个sortable控件sortable-list-1和sortable-list-2，它们互相之间能够连接。我们添加了一些样式，让它们看起来更像一个可排序的列表控件。在JS代码中，我们通过复制一个被拖动的元素的副本到body中来实现拖动时的复制效果。我们为jqxSortable()方法传递了以下四个选项参数：
– filter：筛选可拖动的元素，这里限定了只有class名为item的元素才可以被拖动。
– helper：生成一个可以被拖动的元素副本作为helper。
– start：通过start事件额外设置helper的位置。
– stop：停止拖动时移除所有helper元素。

这个例子中我们实现了一个可复制元素的sortable控件，可根据需求进行修改。

总结来说，connectWith属性能够帮助我们实现多个sortable控件之间的连接和交换。我们需要通过传递一个选择器来指定另一个可连接的sortable控件，然后它们就能够实现元素的拖动和交换了。

Tags: