本文介绍如何基于现有需求，参考网络示例自行实现网页块元素的拖拽与替换功能。通过提供完整的HTML与JavaScript代码，展示未优化但可用的实现方案，帮助开发者理解相关逻辑并直接应用于项目。
JavaScript 实现网页块元素拖拽与替换功能
在寻找现成的插件时，发现它们大多无法满足特定需求。因此，我参考了网上的相关示例，自行开发了一个功能模块，目前该版本尚未进行性能优化。
这里直接展示具体代码实现：dragtoreplace
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DragToReplaceDeom</title> <style> #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} .row span{display:inline-block;width:60px;clear:none;background:#9192B1;height:30px;line-height:30px;margin-bottom:30px;text-align:center;} span.usr{cursor:pointer;position:absolute;display:inline-block;width:60px;clear:none;height:30px;line-height:30px;margin-bottom:30px;text-align:center;background:#4DA74D;color:#fff;} span.usr.catch{background:#BD9B33!important;} </style> </head> <body> <div id="displayRoom"> <div class="row"> <span><span class="usr" id="345">学生甲</span></span><span></span><span></span><span></span></div> <div class="row"> <span><span class="usr" id="123">学生乙</span></span><span id="3"></span><span></span><span></span></div> <div class="row"> <span></span><span></span><span></span><span></span> </div> <div class="row"> <span></span><span><span class="usr" id="456">学生一</span></span><span></span><span></span> </div> </div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]