Loading

easyUI draggable组件使用

easyUI draggable组件使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/test003.js"></script>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="easyui/themes/icon.css">
</head>

<body>
     <div id="box1" class="easyui-draggable" style="background:#ccc;width:300px;height:200px">this is draggable</div>
     <div id="box" style="background:#eee;width:300px;height:200px"><div id="pox">title</div>this is JS draggable</div>
</body>

</html>
$(function(argument) {
    var obj = {
        //revert:true,//true表示返回初始位置
        //cursor:'text',//鼠标在移动过程中的样子
        //handle:'#pox',//能拖动的部分，一般是在里面的title层
        //disabled:true,//禁止拖动了；
        //edge:10,//禁止拖动的边宽度；
        //axis:'h',//v-只能竖直拖动，h-只能水平拖动
        proxy: 'clone', //拖动过程中克隆一个对象
        //deltaX:10,//拖动的物体其相对于鼠标的x偏移量,与proxy结合使用
        //deltaY:10,//拖动的物体其相对于鼠标的y偏移量,与Proxy结合使用
        // proxy:function  (source) {
        //     console.log(source);// source是拖动的HTML对象；
        //     var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
        //     p.html($(source).html()).appendTo('body');
        //     return p;// p是生成出来的对象，拖着走的那个；
        // },
        onBeforeDrag: function(e) { //对应mousedown事件
            console.log('onBeforeDrag');
            console.log(e);
            //return false;//将取消拖动；
        },
        onStartDrag: function(e) { //对应mousedown事件
            console.log('onStartDrag');
            console.log(e);
        },
        onDrag: function(e) { //对应mousemove和mouseup事件
            // console.log('onDrag');
            // console.log(e);
            //return false;//拖不动了，但是能到达目标位置；
            //console.log($('#box').draggable('options'));//获得options属性
            //console.log($('#box').draggable('proxy'));//获得proxy对象；
            //$('#box').draggable('disable');//！！不能这样写，会崩溃的；
        },
        onStopDrag: function(e) { //对应mouseup事件
            console.log('onStopDrag');
            console.log(e);
        }
    };
    $('#box').draggable(obj);
$('#box').draggable('disable'); // 有效果呀！
});

 

posted @ 2015-10-07 08:04  stono  阅读(573)  评论(0)  编辑  收藏  举报