当前位置：首页 → 问答吧 → 拖拽小问题，高手来帮忙下，如何弄为一横排的？

拖拽小问题，高手来帮忙下，如何弄为一横排的？

时间：2010-06-06

来源：互联网

现在的拖拽代码是一竖排的，能否改为一横排的？？
例如总宽度为600px，然后一小格为200，刚好一横排三个，超出的自动换行？谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <meta http-equiv=content-type content="text/html; charset=UTF-8" /> <title>Art welcome-拖动层实例</title> <style type="text/css"> body{ margin:0; overflow-x:hidden; } p{margin:0;} .minDiv{border:1px LightSteelBlue solid; margin:0 0 5px; width:100%;background:#f2f2f7;} .minDiv h1{margin:0; padding:0; height:20px; background:LightSteelBlue; cursor:move;} #maxDiv{margin:50px 100px; width:200px; border:1px gainsboro solid;padding:10px} </style> </head><body> <div id="maxDiv"> <div class="minDiv" id="0"><h1></h1>0<div>888888</div><p>art</p><p>art</p><p>art</p><p>art</p></div> <div class="minDiv" id="1"><h1></h1>1<p>art</p><p>art</p></div> <div class="minDiv" id="2"><h1></h1>2<p>art</p></div> <div class="minDiv" id="3"><h1></h1>3<p>art</p><p>art</p><p>art</p></div> <div class="minDiv" id="4"><h1></h1>4<p>art</p><p>art</p></div> <div class="minDiv" id="5"><h1></h1>5<p>art</p></div> <div style="background:green; height:50px;margin:0 auto 5px">3132132132</div> <div class="minDiv" id="6"><h1></h1>6<p>art</p><p>art</p><p>art</p><p>art</p></div> <div class="minDiv" id="7"><h1></h1>7<p>art</p></div> <div class="minDiv" id="8"><h1></h1>8<p>art</p><p>art</p></div> </div> <script type="text/javascript">// <![CDATA[ var parentObj = document.getElementById("maxDiv"); parentObj.style.position = "relative"; var dragObjs = parentObj.getElementsByTagName("div"); //---for cookie---- var n = 0,earlyDivList = []; var cookieSetup = parentObj.childNodes; for(var dirs in cookieSetup){ if(cookieSetup[dirs].nodeType == 1){ cookieSetup[dirs].setAttribute("dir",n); earlyDivList[n] = cookieSetup[dirs]; n++; } } function SetCookie(){ var n = 0,arrayDiv = []; for(var dirs in cookieSetup){ if(cookieSetup[dirs].nodeType == 1){ arrayDiv[n] = cookieSetup[dirs].getAttribute("dir");n++; } } var expTime = new Date(new Date().setDate(new Date().getDate() + 500)); document.cookie = "dragDiv=" + escape(arrayDiv) + "end; expires=" + expTime.toGMTString() + "; path=/"; } function GetCookie(){ var cookiesAll = document.cookie; var cookiesStart = cookiesAll.indexOf("dragDiv="); var cookiesEnd = cookiesAll.indexOf("end",cookiesStart); var cookies = unescape(cookiesAll.substring(cookiesStart+8,cookiesEnd)); var myCookie = cookies.split(","); for(var into in earlyDivList){ if(myCookie[into] == earlyDivList[into].getAttribute("dir")) continue; parentObj.insertBefore(earlyDivList[myCookie[into]],earlyDivList[into+1]?earlyDivList[into+1]:null) } } window.onunload = SetCookie; window.onload = GetCookie; //---for cookie---- for(var i=0; i<dragObjs.length; i++){ if(dragObjs[i].getElementsByTagName("h1").length<1) continue; dragObjs[i].getElementsByTagName("h1")[0].onmousedown = MouseDown; } var dragObj,dragObjY,dragObjH,tempObj,nextObj,parentObj,nextObjTwo; function MouseDown(e){ dragObj = this.parentNode; dragObjH = parseInt(dragObj.offsetHeight); allH = parentObj.offsetHeight - dragObjH; var e = window.event || e; dragObjY = e.clientY - dragObj.offsetTop; tempObj = document.createElement("div"); tempObj.className = "minDiv"; tempObj.style.cssText = "border:1px red dashed; height:" + (dragObjH - 2) + "px"; previousObj = PreviousDiv(dragObj); if(previousObj != null) previousObjY = parseInt(previousObj.offsetTop + previousObj.offsetHeight / 2); else previousObjY = 0; nextObj = NextDiv(dragObj); if(nextObj != null){ nextObjY = parseInt(nextObj.offsetTop + nextObj.offsetHeight / 2); nextObjTwo = NextDiv(nextObj); }else{ nextObjY = dragObj.offsetTop; nextObjTwo = nextObj; } document.onmousemove = MouseMove; document.onmouseup = function(){document.onmousemove = ""; return}; } function MouseMove(e){ var e = window.event || e; dragObj.style.cssText = "filter:alpha(opacity=50); opacity:0.5; border:1px red solid; position:absolute; top:" + (e.clientY-dragObjY) + "px;width:"+(tempObj.offsetWidth-2)+"px"; if(parseInt(dragObj.style.top) < 0) dragObj.style.top = 0; if(parseInt(dragObj.style.top) > allH) dragObj.style.top = allH; if(parseInt(dragObj.style.top) < previousObjY){ parentObj.insertBefore(tempObj,previousObj); DragGoto.apply(this.arguments); }else if(parseInt(dragObj.style.top)+dragObjH > nextObjY){ parentObj.insertBefore(tempObj,nextObjTwo); DragGoto.apply(this.arguments); }else parentObj.insertBefore(tempObj,nextObj); //document.getElementById("q").innerHTML = parseInt(dragObj.style.top)+"|"+(parseInt(dragObj.style.top)+dragObjH)+"|"+nextObjY+"|"+previousObjY; document.onmouseup = MouseUp; } function MouseUp(){ document.onmousemove = ""; document.onmouseup = ""; parentObj.replaceChild(dragObj,tempObj); dragObj.removeAttribute("style"); } function NextDiv(thisDiv){ var nd = thisDiv.nextSibling; if(nd == null) return null; while(nd.nodeType != 1){ if(nd.nextSibling == null) return null; nd = nd.nextSibling;} return nd; } function PreviousDiv(thisDiv){ var pd = thisDiv.previousSibling; if(pd == null) return null;//ie默认不输出null ff下不用写 while(pd.nodeType != 1){ if(pd.previousSibling == null) return null; pd = pd.previousSibling;} return pd; } function DragGoto(){ previousObj = PreviousDiv(tempObj); if(previousObj != null) previousObjY = parseInt(previousObj.offsetTop + previousObj.offsetHeight / 2); else previousObjY = 0; nextObj = NextDiv(tempObj); if(nextObj != null){ nextObjY = parseInt(nextObj.offsetTop + nextObj.offsetHeight / 2); nextObjTwo = NextDiv(nextObj); }else{ nextObjY = dragObj.offsetTop; nextObjTwo = nextObj; } } // ]]> </script> </body></html>
提示：您可以先修改部分代码再运行

作者: chong6 发布时间: 2010-06-06

无法那样改吗？没人帮忙啊~

作者: chong6 发布时间: 2010-06-07