像QQ空间里面的一样可以任意的拖拽,自定义,分栏,改标题等。
<!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>jQuery实现拖动事件</title>
<SCRIPT src="text/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="text/interface.js" type=text/javascript></SCRIPT>
<SCRIPT src="text/config.js" type=text/javascript></SCRIPT>
<SCRIPT src="text/alertDIV.js" type=text/javascript></SCRIPT>
<STYLE type=text/css media=all>
@import url(text/portlets.css );
</STYLE>
</HEAD>
<BODY>
三条
<span οnclick="widthChange('1:3:1')" style="cursor: hand;">1:3:1</span>
<span οnclick="widthChange('2:2:1')" style="cursor: hand;">2:2:1</span>
<span οnclick="widthChange('1:2:2')" style="cursor: hand;">1:2:2</span>
<br>
二条
<span οnclick="widthChange('1:1')" style="cursor: hand;">1:1</span>
<span οnclick="widthChange('1:2')" style="cursor: hand;">1:2</span>
<span οnclick="widthChange('1:3')" style="cursor: hand;">1:3</span>
<span οnclick="widthChange('2:1')" style="cursor: hand;">2:1</span>
<span οnclick="widthChange('3:1')" style="cursor: hand;">3:1</span>
<div id="myDiv">
数据加裁中...(备注,这里面要组成的数据就是下面的table的格式)
</div>
<br>
<span οnclick="widthChange('1:1')" style="cursor: hand;">左置</span>
<DIV class="serializer">
<a href="#" onClick="serialize(); return false;" >所有列</a>
<a href="#" onClick="serialize('sort0'); return false;" >第一列</a>
<a href="#" onClick="serialize('sort1'); return false;" >第二列</a>
<a href="#" onClick="serialize('sort2'); return false;" >第三列</a>
</DIV>
<!--
<TABLE id="columns" class="columns" cellSpacing=0 border="1" bordercolor="red">
<TR id="myDiv">
<TD id="sort0" >
<DIV id="1" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">1Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="2" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">2Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="3" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">3Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
</TD>
<TD id="sort1" >
<DIV id="4" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="5" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="6" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
</TD>
<TD id="sort2" >
<DIV id="7" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="8" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="9" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
</TD>
</TR>
</TABLE>
-->
</BODY>
</HTML>
<script>
function widthChange(str){
var wids = str.split(":");
var widSum = 0;
var widAvg = 0;
for(var i = 0;i<wids.length;i++){
widSum += parseInt(wids[i]);
widAvg = 720/widSum;
}
// alert("widSum=="+widSum);
// alert("widAvg=="+widAvg);
$("#columns").find("td").each(
function(i){
$(this).width(wids[i]*widAvg);
var wid = wids[i];
$("#sort"+i).find(".portlet").each(
function(i){
$(this).width(wid*widAvg);
}
);
}
);
}
var sorts = ['sort0[]=1&sort0[]=2&sort0[]=3','sort1[]=4&sort1[]=5&sort1[]=6','sort2[]=7&sort2[]=8&sort2[]=9'];//列数 3
var bili = '1:1:1';//比例
//var sorts = ['sort0[]=1&sort0[]=2&sort0[]=3','sort1[]=4&sort1[]=5&sort1[]=6'];//列数 2
//var bili = '1:2';//比例
insertHtml(sorts);
function insertHtml(sorts){
var sortsHtml = '';
sortsHtml += '<TABLE id="columns" class="columns" cellSpacing=0 border="1" bordercolor="red">';
sortsHtml += '<tr>';
sortsHtml += getSorts(sorts);
sortsHtml += '</tr>';
sortsHtml += '</table>';
$("#myDiv").html(sortsHtml);
//alert(sortsHtml);
widthChange(bili);
}
function getSorts(sorts){
var sortsHtml = '';
for(var i=0;i<sorts.length;i++){
sortsHtml += '<TD id="sort'+i+'" >';
sortsHtml += getPortlets(sorts[i]);
sortsHtml += '</TD>';
}
return sortsHtml;
}
function getPortlets(portlets){
var portletsHtml = "";
var pls = portlets.split("&");
for(var i=0;i<pls.length;i++){
var str = pls[i].split("=");
portletsHtml += getPortlet(str[1]);
}
return portletsHtml;
}
function getPortlet(portlet){
var portletHtml = '';
portletHtml += ' <DIV id="1" class="portlet">';
portletHtml += ' <DIV class=portlet_topper><div class="portlet_topper_left">'+portlet+'</div><div class="portlet_topper_right"><a';
portletHtml += ' href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a';
portletHtml += ' href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a>';
portletHtml += ' </DIV></DIV>';
portletHtml += ' <DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>';
portletHtml += ' </DIV>';
return portletHtml;
//<DIV id="1" class="portlet">
// <DIV class=portlet_topper><div class="portlet_topper_left">1Toggwwwle</div><div class="portlet_topper_right"><a //href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a //href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> //</DIV></DIV>
// <DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
//</DIV>
}
</script>
<!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>jQuery实现拖动事件</title>
<SCRIPT src="text/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="text/interface.js" type=text/javascript></SCRIPT>
<SCRIPT src="text/config.js" type=text/javascript></SCRIPT>
<SCRIPT src="text/alertDIV.js" type=text/javascript></SCRIPT>
<STYLE type=text/css media=all>
@import url(text/portlets.css );
</STYLE>
</HEAD>
<BODY>
三条
<span οnclick="widthChange('1:3:1')" style="cursor: hand;">1:3:1</span>
<span οnclick="widthChange('2:2:1')" style="cursor: hand;">2:2:1</span>
<span οnclick="widthChange('1:2:2')" style="cursor: hand;">1:2:2</span>
<br>
二条
<span οnclick="widthChange('1:1')" style="cursor: hand;">1:1</span>
<span οnclick="widthChange('1:2')" style="cursor: hand;">1:2</span>
<span οnclick="widthChange('1:3')" style="cursor: hand;">1:3</span>
<span οnclick="widthChange('2:1')" style="cursor: hand;">2:1</span>
<span οnclick="widthChange('3:1')" style="cursor: hand;">3:1</span>
<div id="myDiv">
数据加裁中...(备注,这里面要组成的数据就是下面的table的格式)
</div>
<br>
<span οnclick="widthChange('1:1')" style="cursor: hand;">左置</span>
<DIV class="serializer">
<a href="#" onClick="serialize(); return false;" >所有列</a>
<a href="#" onClick="serialize('sort0'); return false;" >第一列</a>
<a href="#" onClick="serialize('sort1'); return false;" >第二列</a>
<a href="#" onClick="serialize('sort2'); return false;" >第三列</a>
</DIV>
<!--
<TABLE id="columns" class="columns" cellSpacing=0 border="1" bordercolor="red">
<TR id="myDiv">
<TD id="sort0" >
<DIV id="1" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">1Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="2" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">2Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="3" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">3Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
</TD>
<TD id="sort1" >
<DIV id="4" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="5" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="6" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
</TD>
<TD id="sort2" >
<DIV id="7" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="8" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
<DIV id="9" class="portlet">
<DIV class=portlet_topper><div class="portlet_topper_left">Toggwwwle</div><div class="portlet_topper_right"><a href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> </DIV></DIV>
<DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
</DIV>
</TD>
</TR>
</TABLE>
-->
</BODY>
</HTML>
<script>
function widthChange(str){
var wids = str.split(":");
var widSum = 0;
var widAvg = 0;
for(var i = 0;i<wids.length;i++){
widSum += parseInt(wids[i]);
widAvg = 720/widSum;
}
// alert("widSum=="+widSum);
// alert("widAvg=="+widAvg);
$("#columns").find("td").each(
function(i){
$(this).width(wids[i]*widAvg);
var wid = wids[i];
$("#sort"+i).find(".portlet").each(
function(i){
$(this).width(wid*widAvg);
}
);
}
);
}
var sorts = ['sort0[]=1&sort0[]=2&sort0[]=3','sort1[]=4&sort1[]=5&sort1[]=6','sort2[]=7&sort2[]=8&sort2[]=9'];//列数 3
var bili = '1:1:1';//比例
//var sorts = ['sort0[]=1&sort0[]=2&sort0[]=3','sort1[]=4&sort1[]=5&sort1[]=6'];//列数 2
//var bili = '1:2';//比例
insertHtml(sorts);
function insertHtml(sorts){
var sortsHtml = '';
sortsHtml += '<TABLE id="columns" class="columns" cellSpacing=0 border="1" bordercolor="red">';
sortsHtml += '<tr>';
sortsHtml += getSorts(sorts);
sortsHtml += '</tr>';
sortsHtml += '</table>';
$("#myDiv").html(sortsHtml);
//alert(sortsHtml);
widthChange(bili);
}
function getSorts(sorts){
var sortsHtml = '';
for(var i=0;i<sorts.length;i++){
sortsHtml += '<TD id="sort'+i+'" >';
sortsHtml += getPortlets(sorts[i]);
sortsHtml += '</TD>';
}
return sortsHtml;
}
function getPortlets(portlets){
var portletsHtml = "";
var pls = portlets.split("&");
for(var i=0;i<pls.length;i++){
var str = pls[i].split("=");
portletsHtml += getPortlet(str[1]);
}
return portletsHtml;
}
function getPortlet(portlet){
var portletHtml = '';
portletHtml += ' <DIV id="1" class="portlet">';
portletHtml += ' <DIV class=portlet_topper><div class="portlet_topper_left">'+portlet+'</div><div class="portlet_topper_right"><a';
portletHtml += ' href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a';
portletHtml += ' href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a>';
portletHtml += ' </DIV></DIV>';
portletHtml += ' <DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>';
portletHtml += ' </DIV>';
return portletHtml;
//<DIV id="1" class="portlet">
// <DIV class=portlet_topper><div class="portlet_topper_left">1Toggwwwle</div><div class="portlet_topper_right"><a //href="javascript:void(0);"><img src="text/edt.gif" οnclick="edit(this.parentNode.parentNode.parentNode.parentNode);"/></a> <a //href="javascript:void(0);"><img src="text/del.gif" οnclick="javascript:$(this.parentNode.parentNode.parentNode.parentNode).remove();"/></a> //</DIV></DIV>
// <DIV class=portlet_content><P>Will hardwork & diligence make a successful man?</P></DIV>
//</DIV>
}
</script>