分享html5的一个拖拽手法

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

  分享html5的一个拖拽手法

    之后:

      分享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.

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

上一篇:ubuntu20.04安装ros


下一篇:移动 drag&drop拖放