分享html5的一个拖拽手法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分享html5的一个拖拽手法相关的知识，希望对你有一定的参考价值。

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

　　

    之后：

      

　　上代码：

<!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的一个拖拽手法的主要内容，如果未能解决你的问题，请参考以下文章

Html5的元素拖拽

HTML5+Three.js实现的可拖拽镜面反射与球面折射全景动画

html5的元素拖拽

十个html5代码片段，超实用，一定要收藏

html5拖拽图片上传，怎么获得图片原始尺寸

Html5 的拖拽功能