程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> jquery ui-jQueryUI sortable，有一些疑惑希望的到大伙的幫助！

jquery ui-jQueryUI sortable，有一些疑惑希望的到大伙的幫助！

編輯：編程綜合問答

jQueryUI sortable，有一些疑惑希望的到大伙的幫助！

這兩天在學習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.哪種才是合理的寫法？
希望得到大伙的幫助，謝謝