simple-dragdrop v2.0.4

Simple Dragdrop

一个简单的Drag&Drop组件，用来替代D&D API。

依赖项：

• JQuery 2.0+
• Simple Module

使用方法

首先，需要在页面里引用相关脚本以及css

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/module.js"></script>
<script type="text/javascript" src="path/to/dragdrop.js"></script>

通过dragdrop方法，实例化dragdrop对象

simple.dragdrop({
    el: '.wrapper-1',
    draggable: '.box',
    droppable: '.droparea'
});

API 文档

####初始化选项

el

可选，dragdrop的容器元素，默认为document（dragdrop对象会绑定到el上）。

draggable

必选，可以被drag的元素的选择符selector string

droppable

必选，可以被drop的元素的选择符selector string

helper

可选，拖拽的helper元素，可以是Dom/function，如果为空则为原元素。

placeholder

可选，开始拖动之后被拖拽元素会隐藏，显示placeholder，可以是Dom/function，如果为空，则是一个空白的占位元素

cursorPosition

可选，确定helper的相对于鼠标的位置，默认为'auto'，还可以为'center'（中心）, 'cornor'（左上角）

cursorOffset

可选，对helper位置进行微调，需要传入top以及left

axis

可选，拖拽的方向，默认为'both', 可以为'x', 'y'

方法

destroy()

销毁dragdrop对象，还原初始环境

事件

dragstart opts: dragging, helper, placeholder

当拖拽发生时触发

dragenter opts: dragging, target, helper, placeholder

当被拖拽元素进入可以放置区域时触发

dragleave opts: dragging, target, helper, placeholder

当被拖拽元素离开可以放置区域时触发

drag opts: dragging, helper, placeholder

被拖拽的时候，持续触发

before-dragend opts: dragging, helper, placeholder

当拖拽结束前触发，此时，helper以及placeholder都没有被移除

dragend opts: dragging

当拖拽结束的时候触发，此时，helper以及placeholder已经被移除

drop opts: dragging, target

当拖拽元素放置到可放置区域时触发

destroy

当组件销毁时触发