如何使用jquery-ui实现多层嵌套拖拽?
网友回复
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.10.3.min.js"></script> <style type="text/css"> .container { min-height: 200px; background-color: #4474FF; border: 1px solid #1E44B2; border-radius: 2px; display: inline-block; padding: 10px; } .container .container { min-height: 100px; background-color: #45FF41; border: 1px solid #04B200; display: block; margin-bottom: 5px; } .item { background-color: #FFCB44; border: 1px solid #B2840C; margin-bottom: 5px; border-radius: 2px; padding: 15px 50px; } /* EOS */ </style> </head> <body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="item"></div> </div> <script type="text/javascript"> $('.container').sortable({ connectWith: '.container:not(.ui-sortable-helper)', tolerance: "pointer", cursorAt: { left: -50 } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script> <style type="text/css"> body{ background: black; } .sortable { padding-left: 20px; border: 3px solid white; background: #FFCC33; margin: 10px; } </style> </head> <body> <div class="sortable"> <div class="notsortable">Item 1 (disabled)</div> <div class="sortable"> <div>Item 6.5.1</div> <div>Item 6.5.2</div> <div>Item 6.5.3</div> <div class="notsortable">Item 6.5.4 (disabled)</div> <div class="notsortable">Item 6.5.5 (disabled)</div> <div class="sortable"> <div class="notsortable">Item 6.5.5.1 (disabled)</div> <div class="notsortable">Item 6.5.5.2 (disabled)</div> </div> </div> <div>Item 2</div> <div>Item 3</div> <div class="notsortable">Item 4 (disabled)</div> <div class="notsortable">Item 5 (disabled)</div> <div>Item 6 <div class="sortable"> <div class="notsortable">Item 6.1 (disabled)</div> <div class="notsortable">Item 6.2 (disabled)</div> <div>Item 6.3</div> <div>Item 6.4</div> <div>Item 6.5</div> <div class="sortable"> <div>Item 6.5.1</div> <div>Item 6.5.2</div> <div>Item 6.5.3</div> <div class="notsortable">Item 6.5.4 (disabled)</div> <div class="notsortable">Item 6.5.5 (disabled)</div> <div class="sortable"> <div class="notsortable">Item 6.5.5.1 (disabled)</div> <div class="notsortable">Item 6.5.5.2 (disabled)</div> </div> </div> </div> </div> <div>Item 7</div> </div> <script type="text/javascript"> $(function() { $( ".sortable" ).sortable({ connectWith: ".sortable", cancel: ".notsortable", tolerance: "pointer", cursorAt: { left: -50 } }); }); </script> </body> </html>