当前位置:主页 > JavsScript库 > 拖放 >

javascript中的可拖动/可放置/可排序组件 - agnostic-draggable
栏目分类:拖放   发布日期:2021-08-17   浏览次数:

一个易于使用、与框架无关的拖放 JavaScript 库,它使任何元素都可以拖放、拖放和排序。

安装:

1. 安装和下载包。

# NPM
$ npm i agnostic-draggable --save

2. 将 Draggable/Droppable/Sortable 组件作为 ES 模块导入。

// draggable
import { Draggable } from 'agnostic-draggable';
  
// sortable
import { Sortable } from 'agnostic-draggable';
  
// draggable + droppable
import { Draggable, Droppable } from 'agnostic-draggable';

3. 或者直接加载agnostic-draggable.min.js文档中的JavaScript。

<script src="agnostic-draggable.min.js"></script>

可拖动:

1. 使元素可拖动。

<div id="draggable">拖我</div>
new Draggable(document.querySelector('#draggable'), {
    // 此处的选项
}, eventHandlers);

2. Draggable 的可用选项。

new Draggable(document.querySelector('#draggable'), {
  
    // 将可拖动元素附加到特定元素
    appendTo: 'parent',
  
    // x 或 y
    axis: null,
  
    // 连接到可排序列表
    // e.g. '#sort'
    connectToSortable: null,
  
    // 父、文档、窗口、CSS 选择器或 [x1, y1, x2, y2] 形式的 4 个数字数组contains
    containment: null,
  
    // 光标类型
    cursor: null,
  
    // 如果可拖动元素被禁用
    disabled: false,
  
    // 在拖动开始之前鼠标应该移动的距离(以像素为单位)。
    distance: 0,
  
    // 将拖动助手捕捉到网格
    // e.g. [10, 10]
    grid: null,
  
    // 拖动句柄元素
    handle: null,
  
    // original, clone 或函数
    helper: 'original',
  
    // 拖动时可拖动元素的
    opacity: null,
  
    // invalid, valid, true, false 或函数
    revert: false,
  
    // 持续时间以毫秒为单位
    revertDuration: 200,
  
    // 用于对 Draggable、Droppable 和 Sortable 元素进行分组
    scope: 'default',
  
    // 确定容器是否为scrollable
    scroll: true,
    scrollSensitivity: 20,
    scrollSpeed: 10,
  
    // 堆叠到另一个元素
    stack: null,
  
    // 忽略这些元素
    skip: 'input, textarea, button, select, option',
  
    // z-index 属性
    zIndex: null
      
});

3. Draggable 的可用事件。

new Draggable(document.querySelector('#draggable'), {OPTIONS}, {
    'draggable:init ': function (event) {
      // 做某事
    },
    'drag:start': function (event) {
      // 做某事
    },
    'drag:move': function (event) {
      // 做某事
    },
    'drag:stop': function (event) {
      // 做某事
    },
    'draggable:destroy': function (event) {
      // 做某事
    }
});

可释放:

1. 使元素可放置。

<div id="droppable">放在这里</div>
new Droppable(document.querySelector('#droppable'), {
    // 这里的选项
}, eventHandlers);


2. Droppable 的可用选项。

new Droppable(document.querySelector('#droppable'), {
  
    // 接受哪些 Draggable 元素
    accept: '*',
  
    // 禁用 Droppable 行为
    disabled: false,
  
    // 处理嵌套 Droppable 元素的放置
    greedy: false,
  
    // 用于对 Draggable、Droppable 和 Sortable 元素集进行分组
    scope: 'default',
  
    // fit, intersect, pointer 或 touch
    tolerance: 'intersect'
      
}, eventHandlers);

3. Droppable 的可用事件。

new Droppable(document.querySelector('#droppable'), {OPTIONS}, {
    'droppable:init': function (event) {
      // 做某事
    },
    'droppable:activate': function (event) {
      // 做某事
    },
    'droppable:over': function (event) {
      // 做某事
    },
    'droppable:drop': function (event) {
      // 做某事
    },
    'droppable:out': function (event) {
      // 做某事
    },
    'droppable:deactivate': function (event) {
      // 做某事
    },,
    'draggable:destry': function (event) {
      // 做某事
    },
});

可排序

1. 使列表可排序。

<div id="sortable">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  ...
</div>
new Sortable(document.querySelector('#sortable'), {
    // 这里的选项 
}, eventHandlers);

2. Sortable 的可用选项。

new Sortable(document.querySelector('#sortable'), {
  
    // 将可拖动元素附加到特定元素
    appendTo: 'parent',
  
    // x 或 y
    axis: null,
  
    // 连接到可排序列表
    // e.g. '#sort'
    connectToSortable: null,
  
    // 父、文档、窗口、CSS 选择器或 [x1, y1, x2, y2] 形式的 4 个数字数组contains
    containment: null,
  
    // 光标类型
    cursor: null,
  
    // 如果可拖动元素被禁用
    disabled: false,
  
    // 在开始拖动之前鼠标应该移动的距离(以像素为单位)。
    distance: 0,
  
    // 如果为 false,则此 Sortable 中的项目不能放在空连接的 Sortable
    dropOnEmpty: true,
  
    // 强制排序助手具有大小
    forceHelperSize: false,
  
    // 强制排序占位符具有大小
    forcePlaceholderSize: false,
  
    // 将占位符的可见性设置为隐藏
    hidePlaceholder: false,
  
    // 将拖动助手捕捉到网格
    // e.g. [10, 10]
    grid: null,
  
    // 拖动手柄元素
    handle: null,
  
    // original, clone或函数
    helper: 'original',
  
    // 指定哪些项目应该是可排序的
    items: null,
  
    // 拖动时可拖动元素的
    opacity: null,
  
    // invalid, valid, true, false 或函数
    revert: false,
  
    // 持续时间以毫秒为单位
    revertDuration: 200,
  
    // 用于对 Draggable、Droppable 和Sortable 元素
    scope: 'default',
  
    // 判断容器是否可
    scroll: true,
    scrollSensitivity: 20,
    scrollSpeed: 10,
  
    // 堆叠到另一个元素
    stack: null,
  
    // 忽略这些元素
    skip: 'input, textarea, button, select, option',
  
    // z-index 属性
    zIndex: null
  
});

3. Sortable 的可用事件。

new Droppable(document.querySelector('#droppable'), {OPTIONS}, {
    'sortable:init': function (event) {
      // 做某事
    },
    'sortable:activate': function (event) {
      // 做某事
    },
    'sort:start': function (event) {
      // 做某事
    },
    'sort:move': function (event) {
      // 做某事
    },
    'sort:stop': function (event) {
      // 做某事
    },
    'sortable:over': function (event) {
      // 做某事
    },
    'sortable:change': function (event) {
      // 做某事
    },
    'sortable:remove': function (event) {
      // 做某事
    },
    'sortable:receive': function (event) {
      // 做某事
    },
    'sortable:update': function (event) {
      // 做某事
    },
    'sortable:out': function (event) {
      // 做某事
    },
    'sortable:deactivate': function (event) {
      // 做某事
    },
    'sortable:destroy': function (event) {
      // 做某事
    }
});


官方网站:https://github.com/marcospont/agnostic-draggable

上一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库