❐<div id="box" class="doc-box" style="cursor: move"></div>
<script>
    import draggable from "web/draggable";

    draggable(box);
</script>

❐<div id="box1" class="doc-box" style="cursor: move"></div>
<script>
    import draggable from "web/draggable";

    draggable(box1, {
        onDragStart(){ 
            box1.className += " doc-box-green"; 
        },
        onDragMove(e, s){ 
            box1.innerHTML = s.offsetX.toFixed(0) + "," + s.offsetY.toFixed(0); 
        },
        onDragEnd(){ 
            box1.innerHTML = "";
            box1.className = "doc-box"; 
        }
    });
</script>

❐<div id="box_handle" class="doc-box"><button id="box_handle_body" style="cursor: move">点我拖动</button></div>
<script>
    import draggable from "web/draggable";

    draggable(box_handle_body, {
        proxy: box_handle
    });
</script>
<div id="box_cancel" class="doc-box" style="cursor: move"><button id="box_cancel_body" style="cursor: default;">点外拖动</button></div>
<script>
    import draggable from "web/draggable";

    draggable(box_cancel, {
        cancel(e) {
            return e.target === box_cancel_body;
        }
    });
</script>

❐<div id="box_scroll" class="doc-box" style="cursor: move"></div>
<script>
    import draggable from "web/draggable";

    draggable(box_scroll, {
        onDragMove(e, s) {
            s.autoScroll();
        }
    });
</script>

❐<div id="box_direction_horizontal" class="doc-box" style="cursor: e-resize"></div>
<script>
    import * as dom from "web/dom";
    import draggable from "web/draggable";

    draggable(box_direction_horizontal, {
        onDragMove(e, s) {
            s.direction("horizontal");
        }
    });
</script>
<div id="box_direction_vertial" class="doc-box" style="cursor: n-resize"></div>
<script>
    import * as dom from "web/dom";
    import draggable from "web/draggable";

    draggable(box_direction_vertial, {
        onDragMove(e, s) {
            s.direction("vertical");
        }
    });
</script>

❐<div id="box_limit" class="doc-box" style="cursor: move"></div>
<script>
    import * as dom from "web/dom";
    import draggable from "web/draggable";

    draggable(box_limit, {
        onDragMove(e, s) {
            s.limit(__root__);
        }
    });
</script>

❐<div id="box_step" class="doc-box" style="cursor: move"></div>
<script>
    import draggable from "web/draggable";

    draggable(box_step, {
        onDragMove(e, s) {
            s.step(50);
        }
    });
</script>

❐<div id="box_revert" class="doc-box" style="cursor: move"></div>
<script>
    import draggable from "web/draggable";

    draggable(box_revert, {
        onDragEnd(e, s) {
            s.revert();
        }
    });
</script>

❐<div id="box_snap" class="doc-box" style="cursor: move"></div>
<div id="box_snap_target" class="doc-box doc-box-large doc-box-blue"></div>
<script>
    import draggable from "web/draggable";

    draggable(box_snap, {
        onDragMove(e, s) {
            s.snap(box_snap_target);
        }
    });
</script>

❐<div id="box_proxy" class="doc-box" style="cursor: move"></div>
<script>
    import draggable from "web/draggable";
    import * as dom from "web/dom";

    draggable(box_proxy, {
        onDragStart(e, s) {
            // 创建代理元素。
            s.proxy = s.elem.parentNode.appendChild(document.createElement(s.elem.tagName));
            s.proxy.className = s.elem.className;
            s.proxy.innerHTML = s.elem.innerHTML;
            s.proxy.style.position = "absolute";
            s.proxy.style.zIndex = 1000000;
            s.proxy.style.opacity = 0.5;
            dom.setRect(s.proxy, getRect(s.elem));
        },
        onDragEnd(e, s) {
            // 设置实际元素的位置。
            dom.setRect(s.elem, getRect(s.proxy));

            // 删除代理元素。
            s.proxy.parentNode.removeChild(s.proxy);
            s.proxy = s.elem;
        }
    });
</script>