微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

分享html5的一个拖拽手法

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

  

    之后:

      

  上代码

html5 drag and droptrue] {                -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 }        " _ue_custom_node_="true">one
            two
            three
            four
            five
        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'; //            });        " _ue_custom_node_="true">

每日一句: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.

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。