js实现相对定位div块移动_自动排列

最新推荐文章于 2022-10-25 12:04:46 发布

yue_ch

最新推荐文章于 2022-10-25 12:04:46 发布

阅读量7.4k

点赞数 1

文章标签： div javascript class float function 任务

本文链接：https://blog.csdn.net/yue_ch/article/details/5712081

版权

　　前段时间分到个任务，是一个门户网站的用户自定义频道展示功能，要求自动排列，并且可以实时拖动。js和页面特效不是我的强项，不过幸好网上这方面的例子很多，下了两个研究了一下，心里大概就有数了。网上的例子大多都是靠div的绝对定位来实现的，不是太符合我的需求，所以在先人代码的基础上改了下，还是实现了。以下是完整的代码：

<html> <head> <mce:style></mce:style><style mce_bogus="1">body { -moz-user-focus: ignore; -moz-user-input: disabled; -moz-user-select: none; } .divall{ width:300px; float:left; border:1px solid #cccccc; margin:10px 10px 0px 0px; } .divtitle{ height:20px; border-bottom:1px solid #cccccc; background-color:#eeeeee; line-height: 20px; } .divtitle1{ float:left; width:250px; cursor: move; } .divtitle2{ float:right; width:40px; } .divcontent{ height:170px; width:300px; }</style> <mce:script type="text/javascript"></mce:script> <title>相对定位div块移动_自动排列</title> </head> <body onselectstart='return false;'> <div id="mainDiv" style="width:950px;"> <div id="div1" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题1</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div1content" class="divcontent">内容1</div> </div> <div id="div2" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题2</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div2content" class="divcontent">内容2</div> </div> <div id="div3" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题3</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div3content" class="divcontent">内容3</div> </div> <div id="div4" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题4</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div4content" class="divcontent">内容4</div> </div> <div id="div5" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题5</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div5content" class="divcontent">内容5</div> </div> <div id="div6" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题6</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div6content" class="divcontent">内容6</div> </div> <div id="div7" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题7</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div7content" class="divcontent">内容7</div> </div> <div id="div8" class="divall"> <div class="divtitle"> <div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题8</a></div> <div class="divtitle2"> <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div> </div> </div> <div id="div8content" class="divcontent">内容8</div> </div> <div style="width:300px;height:190px;float:left;margin:10px 10px 0px 0px;"> </div> <div style="clear: both;" mce_style="clear: both;"></div> </div> </body> </html>