JQuery拖动子项到另一个容器里并排序的问题，求改正。

lqpsix 2012-02-21 07:03:30



<!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>无标题文档</title>

    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.ui.core.js"></script>

    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>

    <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>

    <script type="text/javascript" src="js/jquery.ui.sortable.js"></script>

	<script>

	    $(function() {

	        $("#mylist").sortable({ delay: 1 });

	        $("#mylist1").sortable({ delay: 1 });



//	        $('#mylist').sortable({ dropOnEmpty: false });

//	        var dropOnEmpty = $('#mylist').sortable('option', 'mylist1');

//	        $('#mylist').sortable('option', 'mylist1', false);

//	        $('#mylist1').sortable({ dropOnEmpty: false });

//	        var dropOnEmpty = $('#mylist1').sortable('option', 'mylist');

//	        $('#mylist1').sortable('option', 'mylist', false);





//	        $("#mylist").sortable({ connectWith: "mylist1" });

//	        var connectWith = $('#mylist').sortable('option', 'connectWith');

//	        $("#mylist").sortable('option', 'connectWith', "mylist1");

//	        $("#mylist1").sortable({ connectWith: "mylist" });

//	        var connectWith = $("#mylist1").sortable('option', 'connectWith');

//	        $("#mylist1").sortable('option', 'connectWith', "mylist");

	        

            //点击移动元素

	        $("li").mouseup(function() {

	            var id = $(this).parent().attr('id');

	            if (id == "mylist") {

	                $("#mylist1").append($(this));

	            }

	            else {

	                $("#mylist").append($(this));

	            }

	        });

	    });	 

	</script>

	<style type="text/css">

	ul

	{

		list-style-type:none;

		border:1px solid red;

		width:150px;

		margin:0px;

		padding:10px;

		float:left;

	}

	ul li

	{

		border:1px solid gray;

		padding:5px;

		text-align:center;

	}

	.bc

	{

		background-color:#EEE;

	}

	a

	{

		text-decoration:none;

		width:100%;

		height:100%;

    }

	</style>

</head>



<body>

<ul id="mylist">

    <li><a href="#">日志</a></li>

    <li><a href="#">相册</a></li>

    <li><a href="#">心情</a></li>

    <li><a href="#">分享</a></li>

</ul>

<ul id="mylist1">

    <li><a href="#">日志</a></li>

    <li><a href="#">相册</a></li>

    <li><a href="#">心情</a></li>

    <li><a href="#">分享</a></li>

</ul>

</body>

</html>