使用Jquery实现拖动效果，妖求是user1从A组的用户拖动到另外B组去，拖动之后user1成为B组的用户，同时从B组消失，

Scofield_zao 2012-09-06 11:34:59

详情：拖动一般通过DIV来实现。这次实现的方法不限，最好是非商业版的授权插件，能够有源码进行改造学习。
（1）左边的布局有两个teams，teams中含有若干用户（最少一个），右边也有teams（同），左边team整体拖动到右边。加入进去，左边的team消失，右边的team增加。
（2）问题是否涉及对数据库的操作，是否涉及到控件的注册，请大家给出建议！
谢谢！

...全文

400 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

Scofield_zao 2012-09-11

打赏
举报

呵呵，谢谢Crying_Boy，我这边是有些急！对于你的反馈我很感谢！结贴！

Scofield_zao 2012-09-11

打赏
举报

谢谢！

泡泡鱼_ 2012-09-11

打赏
举报

你先是说：拖动一般通过DIV来实现。这次实现的方法不限。好吧，我给你整了个小例子
后又说：要td之间的。好嘛，我又简化着再给你做了个小例子

之所以给你做例子，我无非是想着初学的时候，有个效果参考着看，参考着学总是好的。谁没有经过初学的阶段呀，搞不了,又不知道从何下手是件很郁闷的事。可我给你做了两个小例子了，你又来要求什么Dropdownlist。我明白了，你不是来学东西的，你是来拿东西的

我回答你的问题，分数是次要的，主要的是一来可以帮到人，二来可以让自己印象加深。一举两得的事而已

朋友，奉劝你一句，学习是要有态度的

点下面的链接自己去看吧
jquery sortable详解

Scofield_zao 2012-09-11

打赏
举报

[Quote=引用 11 楼的回复:]

唉，我不牛，我是个大菜鸟，再给你整一次吧，给你搞简单点的。前面的我是拿编辑版面的改的，有点罗嗦，这次给你个直接点的吧。不废话了，直接上代码；老样子，直接拿去测试
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra……
[/Quote]
对了，这个地方的也不一定是dropdownlist的，是一种可以拖动的，可编辑的带下拉列表（类似模糊查询）的TextBox这样子的。很类似dropdownlist，但又不是.Crying_boy，请多多指教！

Scofield_zao 2012-09-11

打赏
举报

[Quote=引用 15 楼的回复:]

自己去修改
[/Quote]
我已经追加分数到100了，请多多指教！有木有QQ啊，求交流！

Scofield_zao 2012-09-11

打赏
举报

[Quote=引用 15 楼的回复:]

自己去修改
[/Quote]
我另开一帖吧，追加分数！与木有qq呢，请多多指教啊！

泡泡鱼_ 2012-09-11

打赏
举报

自己去修改

Scofield_zao 2012-09-11

打赏
举报

[Quote=引用 11 楼的回复:]

唉，我不牛，我是个大菜鸟，再给你整一次吧，给你搞简单点的。前面的我是拿编辑版面的改的，有点罗嗦，这次给你个直接点的吧。不废话了，直接上代码；老样子，直接拿去测试
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra……
[/Quote]
Crying_Boy，真心感谢你的具体详细的指导呀，这个里面的拖动的效果需要Dropdownlist，就是每一个细小的可以拖动的元素可以在dropdownlist之间进行拖动，请指教！谢谢！

Scofield_zao 2012-09-11

打赏
举报

[Quote=引用 11 楼的回复:]

唉，我不牛，我是个大菜鸟，再给你整一次吧，给你搞简单点的。前面的我是拿编辑版面的改的，有点罗嗦，这次给你个直接点的吧。不废话了，直接上代码；老样子，直接拿去测试
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra……
[/Quote]
Crying_Boy，真心感谢你的具体详细的指导呀，这个里面的拖动的效果需要Dropdownlist，就是每一个细小的可以拖动的元素可以在dropdownlist之间进行拖动，请指教！谢谢！

泡泡鱼_ 2012-09-10

打赏
举报

js改成以下的吧，让那个拖动选择效果更明显一点的

<script type="text/javascript">



 function sortableUpdate (e, ui){

    

     if(ui.sender){$("#a7").append("<dd>"+ui.item.html()+" 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}

    }

$(function(){

    $( "table" ).sortable({

        items:'td',//定义被拖动的对象

        connectWith: ".sort",//容器外联

        cancel: ".cacel",//标有该样式的将无法被拖动

        cursor: 'move',    //鼠标样式

        opacity: 0.8,    //拖拽时透明

        forcePlaceholderSize:false,

        revert:true,

        tolerance:'pointer',

        placeholder: 'dl-sort-placeholder',

        update: sortableUpdate//拖拽状态

    }).disableSelection();

})

</script>

泡泡鱼_ 2012-09-10

打赏
举报

唉，我不牛，我是个大菜鸟，再给你整一次吧，给你搞简单点的。前面的我是拿编辑版面的改的，有点罗嗦，这次给你个直接点的吧。不废话了，直接上代码；老样子，直接拿去测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>拖拽_demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<style type="text/css">

body{

    background-color:#777777;

    color:#FFFFFF;

    margin:0px;

    padding:18px 0 0 18px;

    font-size:12px;

    font-family:Arial, Helvetica, sans-serif;

}

.clear{clear:both;}

.ui-sortable

{

    float:left;

    background-color:#FFFFFF;

    border:1px solid #555555;

    color:#222222;

    width:180px;

    margin:0 15px 15px 0;

    padding:0 10px 10px;

}

dl.sort dt{

    background-color:#666666;

    color:#FFFFFF;

    cursor::default;

    height:2em; line-height:2em;

    padding:0px 6px;

    position:relative;

}

dl.sort dd{

    background-color:#FFFFD8;

    margin:0px;

    padding:3px 6px;

    border-bottom:1px dotted #999999;

    border-left:1px dotted #999999;

    border-right:1px dotted #999999;

}

table{width:140px;height:auto;float:left;border:1px solid #bfbfbf;margin:5px;}

tr{width:140px;float:left;}

td{width:140px;float:left;}

.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}

.cacel{ font-size:12px; font-weight:bold;}

</style>

<script type="text/javascript">



 function sortableUpdate (e, ui){

    

     if(ui.sender){$("#a7").append("<dd>"+ui.item.html()+" 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}

    }

$(function(){

    $( "table" ).sortable({

            items:'td',//定义被拖动的对象

			connectWith: ".sort",//容器外联

			cancel: ".cacel",//标有该样式的将无法被拖动

			update: sortableUpdate//拖拽状态

		}).disableSelection();

})

</script>

</head>



<body id="uidemo">

    <div id="container">

        

        <div id="content" class="ui-sortable">

            <h2>teams左</h2>

            <table    id="a1" class="sort">

            <tbody>

                <tr>

                    <td class="cacel">team1[我不能被拖走]</td>

                    <td>aaaaa</td>

                    <td>bbbb</td>

                    <td>ccc</td>

                    <td>ddd</td>

                </tr>

            </tbody>

            </table>

            <div class="clear"></div>

            <table  id="a2" class="sort">

            <tbody>

                <tr>

                    <td class="cacel">team2[我不能被拖走]</td>

                    <td>eee</td>

                    <td>fff</td>

                    <td>ggg</td>

                    <td>hhh</td>

                </tr>

            </tbody>

            </table>

            

        </div>

            

        <div id="sidebar" class="ui-sortable">

            <h2>teams右</h2>

            <dl class="sort" id="a7">

                <dt>我是 拖拽记录</dt>

            </dl>

            <table  id="a3" class="sort">

            <tbody>

                <tr>

                    <td class="cacel">team3[我不能被拖走]</td>

                    <td>mmmm</td>

                    <td>nnnn</td>

                    <td>oooo</td>

                    <td>pppp</td>

                </tr>

            </tbody>

            </table>

            

            <table    id="a4" class="sort">

            <tbody>

                <tr>

                    <td class="cacel">team4[我不能被拖走]</td>

                    <td>qqqq</td>

                    <td>rrrr</td>

                    <td>ssss</td>

                    <td>tttt</td>

                </tr>

            </tbody>

            </table>

        </div>

        

        <div class="clear"></div>

    </div>

</body>

</html>

Scofield_zao 2012-09-10

打赏
举报

[Quote=引用 8 楼的回复:]

这次给你完整代码，你直接复制去运行就是了
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>拖拽_demo</title>
<script……
[/Quote] CryingBoy 你太牛了！非常感激你对我的这么细致的帮助！但是还有一个问题的呀！我是想实现TD之间的拖动，你这次给的代码还是在一个table和table之间的拖动，能否实现td下面嵌入DIV或者神马其他，改善拖动的效果！

泡泡鱼_ 2012-09-09

打赏
举报

这次给你完整代码，你直接复制去运行就是了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>拖拽_demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<style type="text/css">

body{

	background-color:#777777;

	color:#FFFFFF;

	margin:0px;

	padding:18px 0 0 18px;

	font-size:12px;

	font-family:Arial, Helvetica, sans-serif;

}

.clear{clear:both;}

.ui-sortable{

	background-color:#FFFFFF;

	border:1px solid #555555;

	color:#222222;

	width:90px;

	margin:0 15px 15px 0;

	padding:0 10px 10px;

}

dl.sort dt{

	background-color:#666666;

	color:#FFFFFF;

	cursor::default;

	height:2em; line-height:2em;

	padding:0px 6px;

	position:relative;

}

dl.sort dd{

	background-color:#FFFFD8;

	margin:0px;

	padding:3px 6px;

	border-bottom:1px dotted #999999;

	border-left:1px dotted #999999;

	border-right:1px dotted #999999;

}

table{width:70px;height:auto;float:left;border:1px solid #bfbfbf;margin:5px;}

tr{width:70px;float:left;}

td{width:70px;float:left;}

.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}

#content{float:left; width:90px;}

#sidebar{float:left; width:90px;}

</style>

<script type="text/javascript">



var PageLayout=function(){

    this.moveUp = function(){

		//向上移动子项目

		var link = $(this),

		dl = link.parents("dl"),

		prev = dl.prev("dl");

		

		if(link.is(".up") && prev.length > 0){dl.insertBefore(prev);}

		

	}

	this.addItem = function(){

		//添加一个子项目

		

		var sortable = $(this).parents(".ui-sortable");

		var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';

		var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>';

		sortable.append(html).sortable("refresh").find("a.up").bind("click", this.moveUp);

		

	}

	this.emptyTrashCan = function(o){

		//回收站

		o.remove();

	}

	

	this.sortableChange = function(e, ui){

		if(ui.sender){

			var w = $(this).width();

			ui.placeholder.width(w);

			ui.helper.css("width",$(this).children().width());

		}

		

	}

	

	this.sortableUpdate = function(e, ui){

	

		if(this.id == "trashcan"){ui.item.remove();}else{if(ui.sender){$("#a7").append("<dd>[table:id="+ui.item.attr("id")+"] 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}}

	}



	this.Start=function(){

		//引用主页面中的所有块

		var els = ['#content', '#sidebar'];

		var $els = $(els.toString());

		



		//使用jQuery插件

		$els.sortable( 'enable' ); 

		$els.sortable({

			items: '> table',	//拖拽对象

			handle: 'tr',	//可触发该事件的对象

			cursor: 'move',	//鼠标样式

			opacity: 0.8,	//拖拽时透明

			appendTo: 'body',

            forcePlaceholderSize:false,

			revert:true,

			

			tolerance:'pointer',

	

			placeholder: 'dl-sort-placeholder',

			connectWith: els,

			start: function(e,ui) {

			},

			stop:function (e,ui)

			{

			},

			change: this.sortableChange,

			update: this.sortableUpdate		//用于回收站

		});

	}



	this.Destory=function(){

		//引用主页面中的所有块

		var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];

		var $els = $(els.toString());

		$els.sortable( 'refresh' ); 

		$els.sortable( 'disable' );

	}

}

pl=new PageLayout();

window.onload=function(){

pl.Start();

}

</script>

</head>



<body id="uidemo">

<button id="Button2" onclick="pl.Start()">允许拖拽</button> 

<button id="Button1" onclick="pl.Destory()">禁止拖拽</button>  

	<div id="container">

		

		<div id="content" class="ui-sortable">

			<h2>teams左</h2>

			<table	id="a1" class="sort">

		    <tbody>

		        <tr>

		            <td>aaaaa</td>

		            <td>bbbb</td>

		            <td>ccc</td>

		            <td>ddd</td>

		        </tr>

		    </tbody>

		    </table>

		    <div class="clear"></div>

		    <table	id="a2" class="sort">

		    <tbody>

		        <tr>

		            <td>eee</td>

		            <td>fff</td>

		            <td>ggg</td>

		            <td>hhh</td>

		        </tr>

		    </tbody>

		    </table>

		    

		</div>

			

		<div id="sidebar" class="ui-sortable">

			<h2>teams右</h2>

			<dl class="sort" id="a7">

				<dt>我是 拖拽记录</dt>

			</dl>

			<table	id="a3" class="sort">

		    <tbody>

		        <tr>

		            <td>mmmm</td>

		            <td>nnnn</td>

		            <td>oooo</td>

		            <td>pppp</td>

		        </tr>

		    </tbody>

		    </table>

		    

		    <table	id="a4" class="sort">

		    <tbody>

		        <tr>

		            <td>qqqq</td>

		            <td>rrrr</td>

		            <td>ssss</td>

		            <td>tttt</td>

		        </tr>

		    </tbody>

		    </table>

		</div>

		

		<div class="clear"></div>

	</div>

</body>

</html>

泡泡鱼_ 2012-09-09

打赏
举报

[Quote=引用楼主的回复:]
详情：拖动一般通过DIV来实现。这次实现的方法不限，最好是非商业版的授权插件，能够有源码进行改造学习。
（1）左边的布局有两个teams，teams中含有若干用户（最少一个），右边也有teams（同），左边team整体拖动到右边。加入进去，左边的team消失，右边的team增加。
（2）问题是否涉及对数据库的操作，是否涉及到控件的注册，请大家给出建议！
谢谢！
[/Quote]

你又说是DIV，又说方法不限
你要拖动的td是同table中拖动还是不同的table中拖动？

天使小宝 2012-09-09

打赏
举报

Scofield_zao 2012-09-09

打赏
举报

[Quote=引用 4 楼的回复:]

引用 3 楼的回复:
引用 1 楼的回复:

在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/

貌似不错，我先试试，是否是比较符合要求的，总之谢谢你！

汗~~LZ，我上面贴的代码就是这个的实例，特意改的……
[/Quote]
CryingBoy，你好！我想实现Td间的拖动的呀，你这个拖动仅限于Div之内，所以还是请多多指教呀！

泡泡鱼_ 2012-09-07

打赏
举报

[Quote=引用 3 楼的回复:]
引用 1 楼的回复:

在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/

貌似不错，我先试试，是否是比较符合要求的，总之谢谢你！
[/Quote]
汗~~LZ，我上面贴的代码就是这个的实例，特意改的一个Demo......

Scofield_zao 2012-09-07

打赏
举报

[Quote=引用 1 楼的回复:]

在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/
[/Quote]

貌似不错，我先试试，是否是比较符合要求的，总之谢谢你！

泡泡鱼_ 2012-09-06

打赏
举报

改了个Demo给你，你按步骤来吧。
1：将以下css保存为css.css

body{

    background-color:#777777;

    color:#FFFFFF;

    margin:0px;

    padding:18px 0 0 18px;

    font-size:12px;

    font-family:Arial, Helvetica, sans-serif;

}

.clear{clear:both;}

.ui-sortable{

    background-color:#FFFFFF;

    border:1px solid #555555;

    color:#222222;

    margin:0 15px 15px 0;

    padding:0 10px 10px;

}

.ui-sortable h2{

     background-color:#555555;

     border-top:3px solid #666666;

     color:#FFFFD0;

     font-size:12px;

     margin:0 -10px 10px;

     line-height:2em;

     padding:0 10px;

}



dl.sort{

    color:#222222;

    margin:10px 0px;

}

.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}





dl.sort dt{

    background-color:#666666;

    color:#FFFFFF;

    cursor::default;

    height:2em; line-height:2em;

    padding:0px 6px;

    position:relative;

}

dl.sort dd{

    background-color:#FFFFD8;

    margin:0px;

    padding:3px 6px;

    border-bottom:1px dotted #999999;

    border-left:1px dotted #999999;

    border-right:1px dotted #999999;

}



span.options{cursor:pointer; position:absolute; }

.ui-sortable h2 span.options{right:8px; top:8px;position:relative;}

dl.sort dt span.options{right:6px; top:5px;}



#container{float:left;}

#header{width:638px;}

#content{float:left; width:400px;}

#sidebar{float:left; width:200px;}

#footer{width:638px;}

#trashcan{

    float:left;

    width:150px; height:100px;

    background-color:#CCCCCC;

}

#trashcan p{margin:0px;}

2:将以下HTML保存为：drag.html[当然，别的也行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>拖拽_demo</title>

  <link href="css.css" type="text/css" rel="stylesheet" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<script language="javascript" src="drag.js"></script>

</head>



<body id="uidemo">

<button id="edit" onclick="pl.Start()">编辑</button>

<button id="Button1" onclick="pl.Destory()">停止</button>  

    <div id="container">

        <div id="header" class="ui-sortable">

            <h2>头版头条</h2>

            <dl class="sort" id="a1">

                <dt>我是 [dl:id=a1]</dt>

                <dd>2222222222222</dd>

                <dd>33333333333333</dd>

            </dl>

        </div>

            

        <div id="content" class="ui-sortable">

            <h2>详细内容</h2>

            <dl class="sort" id="a2">

                <dt>我是 [dl:id=a2]</dt>

                <dd>555555555555555555555</dd>

                <dd>6666666666666666666</dd>

            </dl>

        </div>

            

        <div id="sidebar" class="ui-sortable">

            <h2>滚动新闻</h2>

<dl class="sort" id="a7">

                <dt>我是 [dl:id=a7]拖拽记录</dt>

            </dl>





            <dl class="sort" id="a3">

                <dt>我是 [dl:id=a3]</dt>

                <dd>7777777777777</dd>

                <dd>8888888888888</dd>

                <dd>7777777777777</dd>

                <dd>8888888888888</dd>



            </dl>

            <dl class="sort" id="a4">

                <dt>我是 [dl:id=a4]</dt>

                <dd>9999999999999</dd>

                <dd>aaaaaaaaaaaaaaa</dd>

            </dl>

            <dl class="sort" id="a5">

                <dt>我是 [dl:id=a5]</dt>

                <dd>bbbbbbbb</dd>

                <dd>cccccccccccc</dd>

            </dl>

        </div>

        

        <div class="clear"></div>

    

        <div id="footer" class="ui-sortable">

            <h2>页脚项</h2>

            <dl class="sort" id="a6">

                <dt>我是 [dl:id=a6]</dt>

                <dd>eeeeeeeeeeeee</dd>

            </dl>

        </div>

    </div>

        

    <div id="trashcan" class="ui-sortable">

        <h2>回收站</h2>

    </div>

</body>

</html>

3:将以下js保存为:drag.js



var PageLayout=function(){

    this.moveUp = function(){

        //向上移动子项目

        var link = $(this),

        dl = link.parents("dl"),

        prev = dl.prev("dl");

        if(link.is(".up") && prev.length > 0){dl.insertBefore(prev);}

        

    }

    this.addItem = function(){

        //添加一个子项目

        var sortable = $(this).parents(".ui-sortable");

        var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';

        var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>';

        sortable.append(html).sortable("refresh").find("a.up").bind("click", this.moveUp);

        

    }

    this.emptyTrashCan = function(o){

        //回收站

        o.remove();

    }

    

    this.sortableChange = function(e, ui){

        if(ui.sender){

           var w = $(this).width();

            ui.placeholder.width(w);



            ui.helper.css("width",$(this).children().width());

            

        }

        

    }

    

    this.sortableUpdate = function(e, ui){

        //更新模块（用户回收站清空后）

        if(this.id == "trashcan"){ui.item.remove();}else{if(ui.sender){$("#a7").append("<dd>[dl:id="+ui.item.attr("id")+"] 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}}

    }







    this.Start=function(){

        //引用主页面中的所有块

        var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];

        var $els = $(els.toString());

        

        //动态添加“增加子项目”、“向上移动”按钮

        //$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');//<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>

        $("dt", $els).append('<span class="options" style="padding-right:20px;"><a class="up">向上</a></span>');

    

        //绑定相关事件

        //$("a.add").bind("click", this.addItem);

        $("a.up").bind("click", this.moveUp);

        $("dt").css("cursor","move");

        //使用jQuery插件

        $els.sortable( 'enable' ); 

        $els.sortable({

            items: '> dl',    //拖拽对象

            handle: 'dt',    //可触发该事件的对象

            cursor: 'move',    //鼠标样式

            opacity: 0.8,    //拖拽时透明

            appendTo: 'body',

            forcePlaceholderSize:false,

            revert:true,

            

            tolerance:'pointer',

    

            placeholder: 'dl-sort-placeholder',

            connectWith: els,

            start: function(e,ui) {

                //ui.helper.css("width","100");

                //ui.helper.css("height","100");

            },

            change: this.sortableChange,

            update: this.sortableUpdate        //用于回收站

        });

    }



    this.Destory=function(){

        //引用主页面中的所有块

        var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];

        var $els = $(els.toString());

        $els.sortable( 'refresh' ); 

        $els.sortable( 'disable' );

    }

}

pl=new PageLayout();