这两天在学习jQueryUI sortable,有一些疑惑希望的到大伙的帮助!
一下是代码:
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script src = 'http://code.jquery.com/jquery-1.8.3.js'></script>
<script src = 'http://code.jquery.com/ui/1.9.2/jquery-ui.js'></script>
<link rel=stylesheet type=text/css
href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' />
<style type=text/css>
p.ui-sortable-helper {
color : red;
}
#div3{border:5px solid red; float:right;}
#div2{float:left;}
.column{width:100px; height:200px;}
</style>
<div id="container">
<div id=div1 class="column">
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
</div>
<div id=div2 class="column">
<p> Paragraph 11 </p>
<p> Paragraph 12 </p>
<p> Paragraph 13 </p>
<p> Paragraph 14 </p>
<p> Paragraph 15 </p>
</div>
<div id=div3 class="column">
<p> Paragraph a </p>
<p> Paragraph b </p>
<p> Paragraph c </p>
<p> Paragraph 14 </p>
<p> Paragraph 15 </p>
</div>
</div>
<script>
//1.
// $("#div1").sortable ({
// revert : 1000,
// connectWith : "#div2,#div3",//div1的元素可以放入div2和div3中;
//});
//$("#div2").sortable ({
// revert : 1000,
// connectWith : "#div1"//div2的元素可以放入div1中;
//});
//$("#div3").sortable ({
// revert : 1000,//div3只能接受别人放进来的元素,不能将自己的元素放入别人那里;
//connectWith : "#div1"
//});
//2.
$('#container').sortable({
items:'p',
connectWith:'.column'
});
//3. dropOnEmpty default true
//$('.column').sortable({
// items:'p',
// connectWith:'.column'
// //dropOnEmpty:false
//});
</script>
</body>
</html>
迷惑之处:
1.以上3种写法具体有什么区别?
2.第2种dropOnEmpty无效
3.哪种才是合理的写法?
希望得到大伙的帮助,谢谢