qTest-拖放

介绍

qTest-拖放是一个基于JavaScript的拖放库。它可以帮助程序员轻松实现拖拽元素功能，并提供了一些常用的事件和方法。

安装

可以通过npm安装qTest-拖放：

npm install qtest-dragdrop --save

也可以直接下载压缩包，然后在HTML中引入：

<script src="/path/to/qtest-dragdrop.min.js"></script>

使用方法

• 创建拖拽实例：

var dragDrop = new qtestDragDrop();

• 绑定拖拽元素和拖放区域：

dragDrop.init({
  el: '.drag-item',                // 拖拽元素选择器
  dropArea: '.drop-container'      // 拖放区域选择器
});

• 可选参数:

var options = {
  onDrop: function(el, target) {    // 拖放结束的回调函数
    console.log(el, target);
  },
  onDragStart: function(el) {       // 开始拖拽时的回调函数
    console.log(el);
  },
  onDragEnd: function(el) {         // 结束拖拽时的回调函数
    console.log(el);
  },
  onDragEnter: function(el, target) { // 拖拽元素进入拖放区域时的回调函数
    console.log(el, target);
  },
  onDragLeave: function(el, target) { // 拖拽元素离开拖放区域时的回调函数
    console.log(el, target);
  },
  onDragOver: function(el, target) {  // 拖拽元素在拖放区域内拖动时的回调函数
    console.log(el, target);
  }
};
dragDrop.init({
  el: '.drag-item',
  dropArea: '.drop-container',
  ...options
});

• 获得所有拖拽元素和拖放区域：

dragDrop.getAllItems();           // 所有拖拽元素
dragDrop.getAllDropAreas();       // 所有拖放区域

• 拖拽元素和拖放区域支持手动添加和删除：

dragDrop.addItem('.new-item');         // 添加一个新的拖拽元素
dragDrop.removeItem('.drag-item');    // 删除一个拖拽元素
dragDrop.addDropArea('.new-area');     // 添加一个新的拖放区域
dragDrop.removeDropArea('.drop-area'); // 删除一个拖放区域

支持的事件

• dragstart: 开始拖拽时触发
• dragend: 结束拖拽时触发
• dragenter: 拖拽元素进入拖放区域时触发
• dragleave: 拖拽元素离开拖放区域时触发
• dragover: 拖拽元素在拖放区域内拖动时触发
• drop: 拖拽结束时触发

方法

init(options: object)

绑定拖拽元素和拖放区域，并绑定事件处理函数。

• options：可选参数，详见上文的使用方法中的可选参数说明。

getAllItems()

获取所有的拖拽元素。

getAllDropAreas()

获取所有的拖放区域。

addItem(itemSelector: string)

手动添加一个新的拖拽元素，并自动进行绑定。itemSelector为该元素的选择器。

removeItem(itemSelector: string)

手动删除一个已绑定的拖拽元素。itemSelector为该元素的选择器。

addDropArea(areaSelector: string)

手动添加一个新的拖放区域，并自动进行绑定。areaSelector为该区域的选择器。

removeDropArea(areaSelector: string)

手动删除一个已绑定的拖放区域。areaSelector为该区域的选择器。

参考链接

• qTest-拖放官方文档