📌  相关文章
📜  jQuery UI 可排序 forceHelperSize 选项(1)

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

jQuery UI 可排序 forceHelperSize 选项

简介

jQuery UI 是一个功能强大的 JavaScript 库，提供了一系列丰富的 UI 组件和交互效果。其中，可排序（Sortable）组件提供了一种简单、灵活的方式来实现元素的可排序和移动。

forceHelperSize 选项是可排序组件提供的一个选项，用于强制排序助手（helper）的尺寸与排序项相同。

使用方法

在初始化可排序组件时，可以通过设置 forceHelperSize 选项来启用该功能：

$( "#sortable" ).sortable({
  forceHelperSize: true
});

此时，当排序助手被创建时，它的尺寸将被设置为与当前排序项相同。这意味着，排序助手将拥有与排序项相同的宽度和高度，并且在移动排序项时，排列也更加准确。

示例

以下代码演示了如何使用 forceHelperSize 选项：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 可排序 forceHelperSize 选项示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #sortable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
    }
    #sortable li {
      margin: 3px 3px 3px 0;
      padding: 0.4em;
      height: 1.5em;
    }
    .ui-state-default {
      background-color: #f6f6f6;
      border: 1px solid #ddd;
      color: #444;
      cursor: default;
    }
    .ui-state-hover {
      background-color: #eee;
    }
    .ui-state-active {
      background-color: #ccc;
      color: #000;
    }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $( function() {
      $( "#sortable" ).sortable({
        forceHelperSize: true
      });
      $( "#sortable" ).disableSelection();
    } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
 
 
</body>
</html>

jQuery UI 可排序 forceHelperSize 选项示例

总结

forceHelperSize 选项是可排序组件提供的一个选项，用于强制排序助手的尺寸与排序项相同。通过设置该选项，我们可以更加准确地控制排序助手的位置和大小，从而实现更加流畅、自然的排序效果。