html5draggable属性是如何做到页面拖动效果的？方法总结在这里！

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">

    内容部分

</div>

//不加属性

$('#box').draggable();

//JS部分

$('#box').draggable({

    revert : true,        //拖动后是否回到起始位置，boolean类型

    cursor : 'text',       //鼠标拖拽样式，十字，文本等

    handle : '#pox',       //句柄，设置后只在设置后只能在当前元素下实现拖拽

    disabled : false,       //设置是否可以被拖拽

    edge : 50,          //设置边界往内多大距离可以实现拖拽

    axis : 'v',          //设置拖拽方向，v：垂直拖拽，h：水平拖拽

    proxy: 'clone',        //设置代理元素，使用clone时为复制当前元素

    deltaX : 10,         //被拖拽元素左上角距离当前光标的X轴方向的距离

    deltaY : 10,         //被拖拽元素左上角距离当前光标的Y轴方向的距离 

    proxy: function(source){    //自定义代理元素

    var p = $('<div style="border:1px solid

    #ccc;width:400px;height:200px;"></div>');

    p.html($(source).html()).appendTo('body');

    return p;

    },

});

//HTML部分

<div id="box" style="width:400px;height:200px;background:red;">

    内容部分

</div>

$('#box').draggable({

    onBeforeDrag : function (e) {

        alert('拖动之前触发！');

        //return false;

    }

});