limeng
/
cetdz


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function ()
        {

            $('.box,.receive').ligerDrag({ proxy: 'clone', revert: true, receive: '.receive',
                onStartDrag: function ()
                {
                    this.set({ cursor: "not-allowed" });
                },
                onDragEnter: function (receive, source, e)
                {
                    this.set({ cursor: "pointer" });
                    //this.proxy.html("释放注入颜色");
                },
                onDragLeave: function (receive, source, e)
                {
                    this.set({ cursor: "not-allowed" });
                    //this.proxy.html("");
                },
                onDrop: function (receive, source, e)
                {
                    if (!this.proxy) return;
                    this.proxy.hide();

                    var bgcolor = this.proxy.css('backgroundColor');
                    if (this.target.hasClass("receive"))
                    {
                        //颜色调换
                        this.target.css("backgroundColor", $(receive).css("backgroundColor"));
                    }
                    $(receive).css("backgroundColor", bgcolor);
                }
            });
        });
         
    </script>
    <style type="text/css">
        .proxy
        {
            border: 1px splid #333;
            position: absolute;
            z-index: 4;
            background: #f1f1f1;
        }
        .box
        {
            width: 80px;
            height: 80px;
            border: 2px solid #bbb;
            float: left;
            margin: 5px;
        }
        .receive
        {
            width: 120px;
            height: 120px;
            border: 1px solid #bbb;
            float: left;
            margin: 4px; 
        }
        
        .txt
        {
            margin: 2px;
            width: 60px;
            border: 1px solid #333;
        }
    </style>
</head>
<body style="padding: 10px">
    <div>
        <div class="box" style="background: #A6DBD8;">
        </div>
        <div class="box" style="background: #AFCCF1;">
        </div>
        <div class="box" style="background: #DA9188;">
        </div>
        <div class="box" style="background: #9CD88A;">
        </div>
        <div class="box" style="background: #D09CC5;">
        </div>
        <div class="box" style="background: #E2DC6B;">
        </div>
         <div class="box" style="background: #F2f2f2;">
        </div>
    </div>
    <div style=" position:absolute; top:160px; width:400px; ">
        <div class="receive">
        </div>
        <div class="receive">
        </div>
        <div class="receive">
        </div>
        <div class="receive">
        </div>
        <div class="receive">
        </div>
        <div class="receive">
        </div> 
    </div>
    
    <div id="message">
    </div>
    <div style="display: none">
    </div>
</body>
</html>