博客

jQWidgets jqxSortable forcePlaceholderSize属性

  • Post category:jquery

jQWidgets jqxSortable forcePlaceholderSize属性详解

jQWidgets jqxSortable 是一个支持 DOM 元素的拖放排序的 jQuery 插件。forcePlaceholderSize 属性是该插件中的一个配置项，用于控制元素拖放时占位符的大小。下面是该属性的完整解释。

forcePlaceholderSize属性

当设置了 forcePlaceholderSize 属性为 true 时，拖动的元素在拖放时会在原有位置上预留一个大小相同的空间，避免因为拖放的元素大小不一致而导致页面跳跃的情况。

  • 缺省值：false。
  • 可选项：true 或 false。
  • 类型：boolean。

示例1：forcePlaceholderSize属性为false时

当 forcePlaceholderSize 属性为 false 时，拖放的元素在原有位置上没有预留空间 ，效果如下所示。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/3.9.1/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/3.9.1/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/3.9.1/jqwidgets/jqxsortable.js"></script>
  </head>
  <body>
    <ul id="sortable">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <script>
      $('#sortable').jqxSortable({
        connectWith: '#sortable',
        placeholder: 'placeholder-style'
      });
    </script>
  </body>
</html>

示例2：forcePlaceholderSize属性为true时

当 forcePlaceholderSize 属性为 true 时，拖动的元素在原有位置上预留空间，效果如下所示。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/3.9.1/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/3.9.1/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/3.9.1/jqwidgets/jqxsortable.js"></script>
  </head>
  <body>
    <ul id="sortable">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <script>
      $('#sortable').jqxSortable({
        connectWith: '#sortable',
        placeholder: 'placeholder-style',
        forcePlaceholderSize: true
      });
    </script>
  </body>
</html>

以上是对 jQWidgets jqxSortable forcePlaceholderSize属性 的完整解释，以及具备两条示例说明。

Tags: