/**

 * jQuery EasyUI 1.3.2

 *

 *翻译：lbq --放置 拉伸

 */

(function ($) {

    //初始化

    function init(jq) {

        $(jq).addClass("droppable");

        $(jq).bind("_dragenter", function (e, source) {

            $.data(jq, "droppable").options.onDragEnter.apply(jq, [e, source]);

        });

        $(jq).bind("_dragleave", function (e, source) {

            $.data(jq, "droppable").options.onDragLeave.apply(jq, [e, source]);

        });

        $(jq).bind("_dragover", function (e, source) {

            $.data(jq, "droppable").options.onDragOver.apply(jq, [e, source]);

        });

        $(jq).bind("_drop", function (e, source) {

            $.data(jq, "droppable").options.onDrop.apply(jq, [e, source]);

        });

    };

    //实例化插件

    $.fn.droppable = function (options, parm) {

        if (typeof options == "string") {

            return $.fn.droppable.methods[options](this, parm);

        }

        options = options || {};

        return this.each(function () {

            var parm = $.data(this, "droppable");

            if (parm) {

                $.extend(parm.options, options);

            } else {

                init(this);

                $.data(this, "droppable", { options: $.extend({}, $.fn.droppable.defaults, $.fn.droppable.parseOptions(this), options) });

            }

        });

    };

    //默认方法

    $.fn.droppable.methods = {

        //返回属性对象

        options: function (jq) {

            return $.data(jq[0], "droppable").options;

        },

        //启用放置功能

        enable: function (jq) {

            return jq.each(function () {

                $(this).droppable({ disabled: false });

            });

        },

        //禁用放置功能

        disable: function (jq) {

            return jq.each(function () {

                $(this).droppable({ disabled: true });

            });

        }

    };

    //属性转换器

    $.fn.droppable.parseOptions = function (target) {

        var t = $(target);

        return $.extend({}, $.parser.parseOptions(target, ["accept"]), { disabled: (t.attr("disabled") ? true : undefined) });

    };

    //默认属性、事件

    $.fn.droppable.defaults = {

        accept: null,//确定哪些可拖拽元素将被接受

        disabled: false,//如果为true，则禁止放置

        //在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素

        onDragEnter: function (e, source) {

        },

        //在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素

        onDragOver: function (e, _c) {

        },

        //在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素

        onDragLeave: function (e, _d) {

        },

        //在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素

        onDrop: function (e, _e) {

        }

    };

})(jQuery);

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic Droppable - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script src="../../plugins2/jquery.parser.js"></script>

    <script src="../../plugins2/jquery.draggable.js"></script>

    <script src="../../plugins2/jquery.droppable.js"></script>

</head>

<body>

    <h2>Basic Droppable</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div>Drag the boxed on left to the target area on right.</div>

    </div>

    <div style="margin:10px 0;"></div>

    <div style="float:left;width:200px;margin-right:20px;">

        <div class="title">Source</div>

        <div>

            <div class="dragitem">Apple</div>

            <div class="dragitem">Peach</div>

            <div class="dragitem">Orange</div>

        </div>

    </div>

    <div style="float:left;width:200px;">

        <div class="title">Target</div>

        <div class="easyui-droppable targetarea"

                data-options="

                    accept: '.dragitem',

                    onDragEnter:function(e,source){

                        $(this).html('enter');

                    },

                    onDragLeave: function(e,source){

                        $(this).html('leave');

                    },

                    onDrop: function(e,source){

                        $(this).html($(source).html() + ' dropped');

                    }

                ">

        </div>

    </div>

    <div style="clear:both"></div>

    <style type="text/css">

        .title{

            margin-bottom:10px;

        }

        .dragitem{

            border:1px solid #ccc;

            width:50px;

            height:50px;

            margin-bottom:10px;

        }

        .targetarea{

            border:1px solid red;

            height:150px;

        }

        .proxy{

            border:1px solid #ccc;

            width:80px;

            background:#fafafa;

        }

    </style>

    <script>

        $(function(){

            $('.dragitem').draggable({

                revert:true,

                deltaX:10,

                deltaY:10,

                proxy:function(source){

                    var n = $('<div class="proxy"></div>');

                    n.html($(source).html()).appendTo('body');

                    return n;

                }

            });

        });

    </script>

</body>

</html>