就是这样的效果：拖拽之前 之后： 上代码：<!DOCTYPE...
就是这样的效果：拖拽之前
之后：
上代码：
<!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.
翻译：我知道再回首时，那些眼泪想来可笑；却不知再回眸时，那些欢声笑语也能叫我潸然泪下。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
