sooka_maintenance
/
spqzqd_siping


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!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 changeZIndex(obj)
        {
            $(obj).css("z-index", 2).siblings("div").css("z-index", 1);
        }
        $(function ()
        {
            //	        $('#rr1,#rr3').ligerDrag({
            //	            onStartDrag: function (current)
            //	            {
            //	                changeZIndex(current.target[0]);
            //	            }
            //	        }); 

            //拖动时不使用代理
            var d = $('#rr1').ligerDrag({ proxy: false });
             
            //使用头部,使用默认代理
            $('#rr2').ligerDrag({ handler: '#rr2h' });
            //使用自定义代理
            $('#rr3').ligerDrag({ proxy: function ()
            {
                var div = $("<div class='proxy'>proxy</div>");
                div.width($(this).width());
                div.height(30);
                div.appendTo('body');
                return div;
            }
            });
            //使用副本代理
            $('#rr4').ligerDrag({ proxy: 'clone' });

            //使用副本代理,并归位
            var drag5 = $('#rr5').ligerDrag({ proxy: 'clone', revert: true });

            //其实这里可以写成：
            //var drag5 = new $.ligerui.controls.Drag({ proxy: 'clone', revert: true, target: $('#rr5')[0] });

            //绑定一个事件，改变拖动时的鼠标图标,也可以把onStartDrag作为参数传入,用bind的好处是可以多次绑定
            drag5.bind('StartDrag', function ()
            {
                //这里this就是drag5,组件管理器,类型为$.ligerui.controls.Drag

                //drag5.cursor = 'not-allowed';
                this.cursor = 'not-allowed';
            });


            //这里利用receive属性定义了一个接收区域
            var drag6 = $('#rr6').ligerDrag({ proxy: 'clone', revert: true
            , receive: '#receive'
            });
            drag6.bind('StartDrag', function ()
            {
                this.cursor = 'not-allowed';
            });
            //当进入区域时
            drag6.bind('DragEnter', function (receive, source, e)
            {
                drag6.cursor = "pointer";
                $(receive).find(".message").html("进入区域");
            });
            //在区域移动
            drag6.bind('DragOver', function (receive, source, e)
            {
                $(receive).find(".message").html("在区域移动 " + e.pageX + ":" + e.pageY);
            });
            //离开区域
            drag6.bind('DragLeave', function (receive, source, e)
            {
                this.cursor = "not-allowed";
                $(receive).find(".message").html("离开区域");
            });
            //在区域释放
            drag6.bind('Drop', function (receive, source, e)
            {
                source.hide();
                $(receive).find(".txt").val(source.find(".txt").val());
                $(receive).find(".message").html("在区域释放");
            });

        });
         
    </script>
    <style type="text/css">
        .proxy
        {
            border: 1px splid #333;
            position: absolute;
            z-index: 4;
            background: #f1f1f1;
        }
        .box
        {
            width: 80px;
            height: 80px;
            border: 1px solid #ddd;
        }
        .txt
        {
            margin: 2px;
            width: 60px;
            border: 1px solid #333;
        }
    </style>
</head>
<body style="padding: 10px">
    <div id="rr1" class="box" style="top: 100px; background: #A6DBD8; position: absolute;"></div>
    <div id="rr2" class="box" style="top: 100px; left: 100px; background: #AFCCF1; position: absolute;">
        <div id="rr2h" style="width: 100%; height: 30px; background: #95BBEC; line-height: 30px;">
        </div>
    </div>
    <div id="rr3" class="box" style="top: 100px; left: 200px; background: #DA9188; position: absolute;">
    </div>
    <div id="rr4" class="box" style="top: 100px; left: 300px; background: #9CD88A; position: absolute;">
    </div>
    <div id="rr5" class="box" style="top: 100px; left: 400px; background: #D09CC5; position: absolute;">
    </div>
    <div id="rr6" class="box" style="top: 100px; left: 500px; background: #E2DC6B; position: absolute;">
        <input type="text" class="txt" value="内容" />
    </div>
    <div id="receive" style="top: 300px; left: 100px; position: absolute; width: 200px;
        height: 200px; padding: 10px; border: 1px solid #888;" onSelectStart= "return false">
        <p><input type="text" class="txt" value="" /></p>
        <p>第6个例子 可以拖动到这里，试试</p>
        <p class="message"></p>
    </div>
    <div id="message">
    </div>
    <div style="display: none">
    </div>
</body>
</html>