draggable()

功能

允许使用鼠标移动元素。

语法

dnd.draggable(elm, params)

参数

  • elm
    HTMLElement对象，指定对象HTML元素
  • params
    一个对象包含了用于控制elmement移动的params

范例

Example : 将列表项拖放到垃圾箱里，然后将它们删除。 

<html>

<head>
    <style>
    ul li {list-style: none;}
    ul#source li a { text-decoration: none;
        color: #000;margin: 10px;width: 150px;
        border: 3px dashed #999;background: #eee;padding: 10px;display: block; }
    *[draggable=true] { -moz-user-select: none; -khtml-user-drag: element;cursor: move; }
    *:-khtml-drag { background-color: rgba(238, 238, 238, 0.5);}
    ul#source li a:hover:after {content: ' (drag me)';}
    ul#source { margin-left: 200px; min-height: 300px; }
    ul#source li.over {border-color: #333;background: #ccc; }
    #bin { background: url(images/bin.jpg) top right no-repeat;
        height: 250px; width: 166px; float: left; border: 5px solid #000;position: relative;margin-top: 0; }
    #bin.over {border-color: red; }
    #bin.active { border-style: dashed; }
    #bin p { font-weight: bold;text-align: center;position: absolute; bottom: 20px;
        width: 166px;font-size: 32px;color: #fff; text-shadow: #000 2px 2px 2px;}
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
    <script>
    require.config({
        baseUrl: "./",
        packages: [{
            name: "skylark",
            location: "/lib/skylark"
        }, ]
    });
    </script>
</head>

<body>
    <article>
        <ul id="bin"></ul>
        <ul id="source">
            <li><a id="one" href="#">one</a></li>
            <li><a href="#" id="two">two</a></li>
            <li><a href="#" id="three">three</a></li>
            <li><a href="#" id="four">four</a></li>
            <li><a href="#" id="five">five</a></li>
        </ul>
    </article>
    <script>
    require(["skylark/finder", "skylark/noder", "skylark/dnd"], function(finder, noder, dnd) {
        var links = finder.findAll("li > a"),
            el = null;
        function draggable(elm) {
            dnd.draggable(elm, {
                started: function(e) {
                    e.ghost = elm;
                    e.transfer = {
                        "text": elm.id
                    };
                }
            });
        }

        for (var i = 0; i < links.length; i++) {
            draggable(links[i]);

        }

        var bin = document.querySelector('#bin');
        dnd.droppable(bin, {
            started: function(e) {
                e.acceptable = true;
                e.activeClass = "active";
                e.hoverClass = "over";
            },
            dropped: function(e) {
                var el = document.getElementById(e.transfer["text"]);
                noder.append(bin, el.parentNode);

            }
        });
    });
    </script>
</body>

</html>