Jquery easyUi Droppable(放置)组件

    生活就是不断的让自己活下去，而我们如何活下去，就是靠不断的完善自己。所以今天我们来看看Jquery easyUi的Droppable(放置)组件。

    一、加载方式

    在使用放置组件时，有一个前提条件，那就是需要有一个可以拖拽的元素，不然我们的放置组件将毫无意义。所以我们这里默认有一个ID为"bb"的元素是设置了课拖拽的。

        1.css样式加载方式

<div id="box" class="easyui-droppable" data-options="accept:'#bb'" style="background:black;width:600px;height:400px;">
</div>

        2.Jquery加载方式

//JS部分
$('#box').droppable({
    accept:'#bb',
});

//HTML部分
<div id="box" style="background:black;width:600px;height:400px;">
</div>

    二、Draggable 属性  

$('#box').droppable({
    accept : '#bb',        //设置可以接受哪些元素，默认为null
    disabled : true,       //设置是否可以放置，Boolean类型，默认为true
});

        三、Droppable 事件

事件名	传参	说明
onDragEnter	e,source	在被拖拽元素到放置区内的时候触发
onDragOver	e,source	在被拖拽元素经过放置区的时候触
onDragLeave	e,source	在被拖拽元素离开放置区的时候触发
onDrop	e,source	在被拖拽元素放入到放置区的时候触发

注释：source 参数获取 DOM 元素。

$('#dd').droppable({
    accept : '#box',
    onDragOver : function (e, source) {
       alert("在被拖拽元素经过放置区的时候触");
    },
    onDragEnter : function (e, source) {
        alert("在被拖拽元素到放置区内的时候触发");
    },
    onDragLeave : function (e, source) {
        alert("在被拖拽元素离开放置区的时候触发");
    },
    onDrop : function (e, source) {
        alert("在被拖拽元素放入到放置区的时候触发");
    },
});

    四、Droggable 方法

方法	说明
options	返回属性对象
enabl	启用放置功
disable	禁用放置功能

//返回属性对象
console.log($('#box').droggable('options'));

//禁止放置
$('#box').draggable('disable');

//启用放置
$('#box').draggable('enable');