[转载] 在网页中拖放和停靠div的例子_div 上面停靠对象-优快云博客

本文提供了一个HTML示例代码，演示如何实现网页元素的拖放及停靠功能。通过JavaScript和CSS实现了元素在不同列之间的拖拽交换，并支持在空白列中新增元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出处不可考，只是收藏一下。代码保存为test.htm然后用浏览器打开即可看到效果。

这个例子不但可以拖放，而且可以停靠。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Freedom</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { width:100%; max-height:100%; padding:0px; margin:0px; text-align:center; } .cell { float:left; clear:right; } .row { clear:both; } .r_nbsp { width:20px; } .root { width:868px; margin: 0 auto; } .root * { /*次属性FF的说*/ -moz-user-select:none; } .line { width:202px; line-height:20px; height:20px; overflow:hidden; font-size:12px; } .move { border:#CCCCCC 1px solid; width:200px; height:aotu; } .title { height:24px; cursor:move; background:#0080C0; font-size:12px; font-weight:bold; color:#FFFFFF; line-height:24px; text-align:center; } .content { border-top:#CCCCCC 1px solid; height:100px; background-color:#F7F7F7; } .CDrag_temp_div { border:#CCCCCC 1px dashed; }</style> <mce:script type="text/javascript"></mce:script> </head><body><br /> <div class="root"> <div class="cell" id="m_1"> <div class="line"> 第一列</div> <div class="move" id="m_1_1"> <div class="title"> 第一列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_1_2"> <div class="title"> 第一列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_1_3"> <div class="title"> 第一列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_1_4"> <div class="title"> 第一列的第四个的说</div> <div class="content"> </div> </div> </div> <div class="cell r_nbsp"> </div> <div class="cell" id="m_2"> <div class="line"> 第二列</div> <div class="move" id="m_2_1"> <div class="title"> 第二列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_2_2"> <div class="title"> 第二列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_2_3"> <div class="title"> 第二列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_2_4"> <div class="title"> 第二列的第四个的说</div> <div class="content"> </div> </div> </div> <div class="cell r_nbsp"> </div> <div class="cell" id="m_3"> <div class="line"> 第三列</div> <div class="move" id="m_3_1"> <div class="title"> 第三列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_3_2"> <div class="title"> 第三列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_3_3"> <div class="title"> 第三列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_3_4"> <div class="title"> 第三列的第四个的说</div> <div class="content"> </div> </div> </div> <div class="cell r_nbsp"> </div> <div class="cell" id="m_4"> <div class="line"> 第四列</div> <div class="move" id="m_4_1"> <div class="title"> 第四列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_4_2"> <div class="title"> 第四列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_4_3"> <div class="title"> 第四列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_4_4"> <div class="title"> 第四列的第四个的说</div> <div class="content"> </div> </div> </div> </div> </body></html>