拖拽的实现

最新推荐文章于 2024-08-18 10:54:05 发布

iteye_891

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量88

点赞数

分类专栏： jquery 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/iteye_891/article/details/81801482

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

像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>


</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>

iteye_891

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽的实现

像QQ空间里面的一样可以任意的拖拽，自定义，分栏，改标题等。 jQuery实现拖动事件@import url(text/portlets.css );三条1:3:1 &nbsp;&nbsp;2:2:1 &nbsp;&nbsp;1:2:2 &nbsp;&nbsp;二条1:1 &nbsp;&nbsp;1:2 &...
复制链接

扫一扫

专栏目录