EasyUI ---- draggable可拖動的用法

  
    <link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Scripts/easyui1.5/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/easyui1.5/jquery.min.js"></script>
    <script src="~/Scripts/easyui1.5/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui1.5/locale/easyui-lang-zh_CN.js"></script>

    //第一種加 class="easyui-draggable" 
 <div class="easyui-draggable" style="width:200px; height:200px; border:1px solid #808080;"></div>
    
    
     //第二種 js
 <div id="draggable" style="width:200px; height:200px; border:1px solid #808080;"></div>


<script>
    $(function () {
        $("#draggable").draggable();
    });

</script>
    

//拖拽的限制

<div style="border:1px solid #ff0000; width:500px; height:500px; left:100px; top:100px;">
    <div class="easyui-draggable" style="width:200px; height:200px; border:1px solid #808080;"></div>
    <div id="draggable" data-options="onDrag:onDrag" style="width:200px; height:200px; border:1px solid #808080;"></div>

</div>
<script>
    $(function () {

        $("#draggable").draggable({

        });
    });

    function onDrag(e) {

        var d = e.data;
        //不能脫出父容器的左邊框
        if (d.left < 0) { d.left = 0 }
        //不能脫出父容器的上邊框
        if (d.top < 0) { d.top = 0 }

        //d.target 內層div的寬度，d.parent是外層div寬度  不能脫出父容器的右邊框
        if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
            d.left = $(d.parent).width() - $(d.target).outerWidth();
        }
        //不能脫出父容器的下邊框
        if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
            d.top = $(d.parent).height() - $(d.target).outerHeight();
        }
    }

    //也可用js調用
    $(function () {
        $("#draggable").draggable({
            onDrag:onDrag
        });
    });

</script>