第一百九十四节，jQuery EasyUI，Droppable(放置)组件-优快云博客

本文介绍了EasyUI框架中的Droppable组件，详细解释了如何通过类选择器或JavaScript来实现元素放置功能，包括配置项如接受放置的元素、禁用放置等属性，并列举了拖放过程中触发的各种事件及其应用场景。

jQuery EasyUI，Droppable(放置)组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方法，所谓放置，就将一个物体入某一个物体内触发各种效果，这个组件不依赖于其他组件。

一．加载方式

//class 加载方式
<div id="dd"
    class="easyui-droppable"
    data-options="accept:'#box,#pox'"
    style="background:black;width:600px;height:400px;">
</div>

droppable()将一个元素设置成放置元素，放置元素就是将另外指定的元素放置进来触发事件

//JS 加载调用
$('#box').droppable({
　　accept:'#box,#pox',
});

二．属性列表

accept selector 默认为 null，确定哪些元素被接受，值为要接收放置的元素id

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({    //将fzh元素设置成放置
        accept:'#box,#pox'   //确定哪些元素被接受，值为要接收放置的元素id
    })
});

disabled boolean 默认为 false，如果为 true，则禁止放置

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept:'#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        disabled:true         //如果为 true，则禁止放置
    })
});

三．事件列表

注意：以下事件 e接收的事件event对象，source接收的放置进来的元素对象

onDragEnter e,source 在被拖拽元素到放置区内的时候触发，只触发一次

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDragEnter: function (e, source) {       //在被拖拽元素到放置区内的时候触发，只触发一次
            $(this).css('background', 'blue');
        }
    })
});

onDragOver e,source 在被拖拽元素经过放置区的时候触发

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDragEnter: function (e, source) {       //在被拖拽元素经过放置区的时候触发，触发多次
            $(this).css('background', 'blue');
        }
    })
});

onDragLeave e,source 在被拖拽元素离开放置区的时候触发

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDragLeave: function (e, source) {       //在被拖拽元素离开放置区的时候触发，
            $(this).css('background', 'blue');
        }
    })
});

onDrop e,source 在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
            $(this).css('background', 'blue');
        }
    })
});

四．方法列表

options none 返回属性对象

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
            $(this).css('background', 'blue');
        }
    });
    var p = $('#fzh').droppable('options');   //options  none 返回属性对象
    $.each(p, function (attr, value) {        //遍历属性对象
        alert(attr + ':' + value);
    });
});

enable none 启用放置功能

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
            $(this).css('background', 'blue');
        }
    });
    $('#fzh').droppable('disable');  //disable  none
    $('#fzh').droppable('enable');  //enable  none 启用放置功能
});

disable none 禁用放置功能

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({     //将fzh元素设置成放置
        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id
        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
            $(this).css('background', 'blue');
        }
    });
    $('#fzh').droppable('disable');  //disable  none 禁用放置功能
});

$.fn.droppable.defaults 重写默认值对象。

$.fn.droppable.defaults.disabled = true;