movable()

功能

撤消操作。

语法

mover.movable(elm, params)

参数

elm
HTMLElement对象，指定对象HTML元素
params
一个对象包含了用于控制elmement移动的params
- handle
  允许移动操作的句柄元素默认为元素
- constraints
  该参数用于限制元素移动的范围
- started
  当动作开始时回调函数
- moving
  移动的回调函数
- stopped
  当移动停止时，回调函数

范例

Example:

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    body {
        padding: 1em;
        color: #666;
        background-color: #dedede;
    }

    #moveable1 {
        left: 100px;
        top: 78px;
        position: absolute;
        background: #fff;
        border: 1px solid black;
        padding: 8px;
    }

    #handle1 {
        background: #333;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        border: 1px solid black;
    }

    #moveable2 {
        position: absolute;
        background: #fff;
        width: 200px;
        height: 200px;
        left: 300px;
        top: 400px;
        padding: 10px 20px;
        margin: 10px 20px;
        border: 10px solid black;
        cursor: pointer;
        radius: 8pt;
        -moz-border-radius: 8pt 8pt;
    }

    #moveable3 {
        position: absolute;
        width: 150px;
        height: 100px;
        background: #ff8;
        color: blue;
        font-weight: bold;
    }
    </style>
    <script type="text/javascript" src="../../dist/skylark-utils-all.js"></script>
</head>

<body>
    <h1>Skylark Moveable test</h1>
    <table id="moveable1">
        <tr>
            <td id="handle1" colspan="2">You can drag the table using this handle.</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Lorem ipsum dolor sit amet...</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mauris vulputate elit a risus...</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Pellentesque habitant morbi tristique senectus...</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Duis ac augue rhoncus neque...</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Quisque egestas turpis. Sed id...</td>
        </tr>
    </table>
    <div id="moveable2">
        <div>You can drag this whole object around.</div>
        <div id="moveable3">You can move this paragraph. It is relatively positioned.</div>
    </div>
    <script>
        skylarkjs.mover.movable(skylarkjs.finder.byId("moveable1"), {
            handle: skylarkjs.finder.byId("handle1")
        });
        skylarkjs.mover.movable(skylarkjs.finder.byId("moveable2"));
        skylarkjs.mover.movable(skylarkjs.finder.byId("moveable3"));
    </script>
</body>

</html>