日期:2014-05-16  浏览次数:20394 次

js+css实现div拖动并排序导出
实现功能:
1 在一行中 动态添加div若干 (div多后一行显示不下会显示两行)
2 并对div进行行内拖动 插入到行中任意两个div之间 (最好能在两个可插入的div之间的下面显示一个三角板 提示插入点)
3 排列结束后 最后导出 该行中div的顺序排列的 div内容

功能1 已经实现 
  提供可能使用到得资料
  1 使用jquery对div的动态添加删除
  $("#yxlist").append("<div id="+id+"_s"+" class=\"insideParent\">"+v+"</div>");
  $("#"+id+"_s").remove();
  2 让div不换行的  
  float: left;
功能2 和3 期待高手帮忙解决下

------解决方案--------------------
我手里有份类似的 要的话 把邮箱留着
------解决方案--------------------
http://jqueryui.com/demos/sortable/
------解决方案--------------------
<script type="text/javascript">
<!--
var IE=false,FF=false,W=window,D=document,H,B,GET="getElementsByTagName",GEI="getElementById",qq=0;
function fold(){
var e;
e=fixE(e);
if(e)element=fixElement(e);
element=element.parentNode.parentNode;
element.className=element.className.indexOf("hide")>0?"module":"module hide";
}
var Drag={
draging : false,
x : 0,
y : 0,
element : null,
fDiv : null,
ghost : null,
addEvent : function(){var a=D[GET]("li");for(var i=a.length-1;i>-1;i--)if(a[i].className=="module")a[i].onmousedown=Drag.dragStart;},
ix:2,iy:7,
ox:6,oy:7,
fx:6,fy:6,
dragStart : function (e){
if(Drag.draging)return;
var e;
e=fixE(e);
if(e)element=fixElement(e);

/*********
var k,s="";
for(k in element)s+=k+" : "+element[k]+"<br/>";
D.getElementById("bbb").innerHTML=s;
**********/
D.getElementById("aaa").innerHTML=element.parentNode.offsetTop+ ","+element.parentNode.offsetHeight;
//测试
if(element.className!="title")return;
element=element.parentNode;
Drag.element=element;
//以上获得当前移动的模块
Drag.x=e.layerX?e.layerX+Drag.fx:(IE?e.x+Drag.ix:e.offsetX+Drag.ox);
Drag.y=e.layerY?e.layerY+Drag.fy:(IE?e.y+Drag.iy:e.offsetY+Drag.oy);
//鼠标相对于模块的位置
Drop.measure();
if(e.layerX){Drag.floatIt(e);Drag.drag(e);}//fix FF
B.style.cursor="move";
D.onmousemove=Drag.drag;
D.ondragstart=function(){window.event.returnValue = false;}
D.onselectstart=function(){window.event.returnValue = false;};
D.onselect=function(){return false};
D.onmouseup=element.onmouseup=Drag.dragEnd;
element.onmousedown=null;
},
drag : function (e){
var e;
e=fixE(e);
if(!Drag.fDiv)Drag.floatIt(e);//for IE & Opera
var x=e.clientX,y=e.clientY;
Drag.fDiv.style.top=y+H.scrollTop-Drag.y+"px";
Drag.fDiv.style.left=x+H.scrollLeft-Drag.x+"px";
Drop.drop(x,y);
//statu(e);
},
dragEnd : function (e){
B.style.cursor="";
D.ondragstart=D.onmousemove=D.onselectstart=D.onselect=D.onmouseup=null;
Drag.element.onmousedown=Drag.dragStart;
if(!Drag.draging)return;
Drag.ghost.parentNode.insertBefore(Drag.element,Drag.ghost);
Drag.ghost.parentNode.removeChild(Drag.ghost);
B.removeChild(Drag.fDiv);
Drag.fDiv=null;
Drag.draging=false;
Drop.init(D[GEI]("container"));
},
floatIt : function(e){
var e,element=Drag.element;
var ghost=D.createElement("LI");
Drag.ghost=ghost;
ghost.className="module ghost";
ghost.style.height=element.offsetHeight-2+"px";
element.parentNode.insertBefore(ghost,element);
//创建模块占位框