就是这样的效果:拖拽之前
之后:
上代码:
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.
翻译:我知道再回首时,那些眼泪想来可笑;却不知再回眸时,那些欢声笑语也能叫我潸然泪下。