draggable

easyui 的draggable使得被声明的元素变的可拖拽。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript">
    $(function(){
        $("div[name=box1]").draggable({
            revert : true,//拖动停止时 返回原位置
            cursor : "text",//拖动时鼠标指针的样式 string /move
            deltaX : 0,//拖动时 容器对应当前光标的位置 x
            deltaY : 0,//拖动时 容器对应当前光标的位置 y
            disabled : false,//是否能够拖动
            handle : "#text",//指定拖动容器中指定的元素 才能拖动容器
            //edge : 10,//指针距离容器的边界的10px之内拖动失效
            axis : "h",//对象移动的方向 h代表水平方向 v 垂直方向
            proxy : "clone", //function(e){
                //var p=$("#box2");
                //p.html($(e).html());
                //return p;
            //},
            onBeforeDrag : function(e){
                //alert("拖动前触发的函数");
                //return false; 返回false 则取消拖动
            },
            onStartDrag : function(e){
                //alert('拖动开始时触发');
                //return false;
            },
            onDrag : function(e){
                //alert("拖动过程中触发");
                //return false;
            },
            onStopDrag : function(e){
                alert("拖动结束时触发");
                //$("#box1").draggable("disable"); 禁止拖动
                //$("#box1").draggable("enable"); 禁止拖动
                //console.log($("#box1").draggable("proxy"));返回代理元素
                console.log($("#box1").draggable("options"));//返回代理元素
            }
        });
        //设置对象的默认值
        $.fn.draggable.defaults.cursor="text";
    });
</script>
</head>
<body>
<div id="box" class="easyui-draggable"
style="300px;height:300px;background-color:red;">draggable</div>
<div id="box1" class="box1" name="box1"
style="300px;height:300px;background-color:yellow;"><span id="text">draggable</span></div>
<div id="box2"
style="300px;height:300px;background-color:blue;">代理对象</div>
</body>
</html>