script.aculo.us 排序重叠选项

script.aculo.us库是一个跨浏览器库，旨在改进网站的用户界面。 sortable 模块可用于使任何列表可排序，允许用户根据需要的顺序拖动任何项目。

重叠选项用于指定可排序列表中的项目是否在给定方向与其他项目重叠一半以上时做出反应。它可以设置为“假”、“垂直”或“水平”。应该为垂直列表选择“垂直”值，而必须为水平列表选择“水平”值。

句法：

{ overlap:value }

参数：此选项具有单个值，如上所述和如下所述。

• value：这是一个字符串，它指定可排序列表中的项目在给定方向与其他项目重叠超过 50% 时是否会做出反应。默认值为“垂直”。

示例 1：以下示例说明了此选项的使用。在实施过程中，请注意预编译文件的正确文件路径。

HTML

  
  
  
  
  
    li {
      cursor: pointer;
      height: 30px;
      width: 100px;
      border: 1px solid;
      padding: 10px;
    }
  

  

  
    
      GeeksforGeeks
    
  
  
    script.aculo.us Sorting overlap Option
  
    
  This list has overlap set to 'false'.
  
  
    Element 1
    Element 2
    Element 3
    Element 4
  
  
    
  This list has overlap set to 'vertical'
  
  
    Element 1
    Element 2
    Element 3
    Element 4
  
  
  
    window.onload = function () {
  
      Sortable.create("list1", {
  
        // Set the overlap to 'false',
        // that is, no overlap
        overlap: 'false'
      });
  
      Sortable.create("list2", {
          
        // Set the overlap to 'vertical'
        overlap: 'vertical'
      });
    };
  

输出：

示例 2：

HTML

  
  
  
  
  
    span {
      cursor: pointer;
      border: 1px solid;
      padding: 10px;
    }
  

  

  
    
      GeeksforGeeks
    
  
  
    script.aculo.us Sorting overlap Option
  
    
  This list has overlap set to 'false'.
  
  
    Element 1
    Element 2
    Element 3
    Element 4
  
    
  This list has overlap set to 'horizontal'
  
  
    Element 1
    Element 2
    Element 3
    Element 4
  
  
    window.onload = function () {
  
      Sortable.create("list1",
        {
          elements: $$('#list1 span'),
          constraint: 'horizontal',
  
          // Set the overlap to 'false',
          // that is, no overlap
          overlap: 'false'
        });
  
      Sortable.create("list2",
        {
          elements: $$('#list2 span'),
          constraint: 'horizontal',
  
          // Set the overlap to 'horizontal'
          overlap: 'horizontal'
            
        });
    };
  

输出：