首页 > 代码库 > 分享html5的一个拖拽手法

分享html5的一个拖拽手法

2024-09-07 06:15:21   217人阅读

　　就是这样的效果：拖拽之前

　　技术分享

    之后：

      技术分享

　　上代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title> html5 drag and drop</title>
        <style>
            *[draggable=true] {
                -moz-user-select:none;
                -khtml-user-drag: element;
                cursor: move;
            }
            *:-khtml-drag {
                background-color: rgba(238,238,238, 0.5);
            }
            a {
                text-decoration: none;
                color: #000;
                width:120px;
                border: 3px dashed #999;
                padding: 10px;
                display:inline-block;
                transition: all 1s;
                position:absolute ;
                top:10px;
            }

            .container {
                position:relative;
            }
            a.move {
                -webkit-transform:scale3d( 1.1, 1.1, 1.1 );
            }
            a:hover:after {
                content: ‘ (drag me)‘;
                color: green }

        </style>
    </head>
    <body>
        <div class="container">
            <a draggable="true"  id="a1" style=‘left:0px;‘>one</a>
            <a draggable="true"  id="a2" style=‘left:160px;‘>two</a>
            <a draggable="true"  id="a3" style=‘left:320px;‘>three</a>
            <a draggable="true"  id="a4" style=‘left:480px;‘>four</a>
            <a draggable="true"  id="a5" style=‘left:640px;‘>five</a>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
        <script>
            var origin, is_moving = false;

            $(".container").find("a").on("drop",
            function(e) {
                var origin_pos = $(origin).position();
                var target_pos = $(e.target).position();

                $(origin).addClass("move").animate(target_pos, "fast",
                    function() {
                        console.log(this);
                        $(this).removeClass("move");
                    });
                
                $(e.target).addClass("move").animate(origin_pos, "fast",
                function() {
                    $(this).removeClass("move");
                });

            }).on("dragstart",
            function(e) {
                if (is_moving) {
                    return false;
                }
                is_moving = true;
           
                e.originalEvent.dataTransfer.effectAllowed = ‘move‘;
                origin = this;

            }).on("dragover",
            function(e) {
                if (e.preventDefault) e.preventDefault(); //
                is_moving = false;
                e.originalEvent.dataTransfer.dropEffect = ‘move‘; //
            });
        </script>
    </body>
</html>

每日一句：I always knew looking back on the tears would make me laugh, but I never knew looking back on the laughs would make me cry.

翻译：我知道再回首时，那些眼泪想来可笑；却不知再回眸时，那些欢声笑语也能叫我潸然泪下。

分享html5的一个拖拽手法


联系
我们