博客

jQWidgets jqxSortable轴属性

  • Post category:jquery

当我们使用 jQWidgets 中的 jqxSortable 插件时，可以设置轴属性。该属性指定了将元素拖动到其它元素列表中时，拖动的方向。轴属性有两种选择：横向（horizontal）和纵向（vertical）。

设置 jqxSortable 的轴属性

我们可以使用 axis 属性来设置 jqxSortable 的轴属性。这个属性可以赋值为 ‘horizontal’ 或 ‘vertical’。代码示例如下：

$('#sortable').jqxSortable({ axis: 'horizontal' });

这样就将可排序元素的拖动方向设置为横向。

示例代码一：横向拖动

如果我们将轴属性设置为 ‘horizontal’，那么就能够实现横向的拖动。代码示例如下：

<div id="sortable">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

<script>
  $(document).ready(function(){
    $('#sortable').jqxSortable({ axis: 'horizontal' });
  });
</script>

在这个示例中，我们创建了一个 div 容器，其中包含了五个子元素，这五个子元素可以被排序。在 JavaScript 代码块中，我们将容器设置为可排序的，并将轴属性设为 ‘horizontal’。

示例代码二：纵向拖动

如果我们将轴属性设置为 ‘vertical’，那么就可以实现纵向的拖动。代码示例如下：

<div id="sortable">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

<script>
  $(document).ready(function(){
    $('#sortable').jqxSortable({ axis: 'vertical' });
  });
</script>

在这个示例中，我们同样创建一个 div 容器，其中包含了五个子元素，这些子元素也能够被排序。在 JavaScript 代码块中，我们将容器设置为可排序的，并将轴属性设为 ‘vertical’。

通过以上的示例可以看到，实现横向或纵向的拖动只需要改变轴属性的值即可。同时，我们还可以使用以上的示例代码，自行添加样式，以实现更好的可读性和用户体验。

Tags: