问题描述
- 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.哪种才是合理的写法？
希望得到大伙的帮助，谢谢
解决方案
就选择器不一样而已，就是要操作的元素不一样，只要符合jq的选择器语法就行
解决方案二：
你上面代码乱了，这种你最好去看他的api ，实在不行debug 他的js代码。
解决方案三：
你上面的写法，选择器不同，
具体我没用过这个控件你可以调试看看
时间： 2024-11-21 05:33:37