拖放时显示位置和总计

Question

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Handle empty lists</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px; } #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $("ul.droptrue").sortable({ connectWith: "ul" }); $("ul.dropfalse").sortable({ connectWith: "ul", dropOnEmpty: false }); $("#sortable1, #sortable2, #sortable3").disableSelection(); }); </script> </head> <body> <ul id="sortable1" class="droptrue"> <li class="ui-state-default">Worker 1</li> <li class="ui-state-default">Worker 2</li> <li class="ui-state-default">Worker 3</li> <li class="ui-state-default">Worker 4</li> <li class="ui-state-default">Worker 5</li> </ul> <ul id="sortable2" class="droptrue"> <li class="ui-state-default">Worker 6</li> <li class="ui-state-default">Worker 7</li> <li class="ui-state-default">Worker 8</li> <li class="ui-state-default">Worker 9</li> <li class="ui-state-default">Worker 10</li> </ul> <ul id="sortable3" class="droptrue"> <li class="ui-state-default">Worker 11</li> <li class="ui-state-default">Worker 12</li> <li class="ui-state-default">Worker 13</li> <li class="ui-state-default">Worker 14</li> <li class="ui-state-default">Worker 15</li> </ul> <br style="clear:both"> </body> </html>

As I mentioned above at the end of each Column the number of rows must be displayed and aside of each row numbering should be displayed. 如前所述，在每列的末尾，必须显示行数，并在每行编号旁边显示。

1 worker1     1 worker8           1 worker14
2 worker2     2 worker10          2 worker13
3 worker3     3 worker11          3 worker15
4 worker4     4 worker12           total 3
5 worker5     total 4
6 worker7
7 worker6
8 worker9
Total 8

Answer 1

To do what you require you could wrap the ul elements in a div with another div under them to hold the total count of li elements within that container. 要执行您需要的操作，您可以将ul元素包装在一个div并在其下放置另一个div ，以保存该容器中li元素的总数。 You can then updated that total when an item is dropped using the stop property of the sortable plugin, like this: 然后，您可以使用sortable插件的stop属性更新删除某个项目时的total ，如下所示：

 $("ul.droptrue").sortable({ connectWith: "ul", stop: function() { $('.total').text(function() { return 'Total: ' + $(this).closest('.container').find('li').length; }); } }); $("ul.dropfalse").sortable({ connectWith: "ul", dropOnEmpty: false }); $("#sortable1, #sortable2, #sortable3").disableSelection();

 .container { display: inline-block; } #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px; } #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 0.8em; /* changed so the example fits in the snippet better*/ width: 120px; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div class="container"> <ul id="sortable1" class="droptrue"> <li class="ui-state-default">Worker 1</li> <li class="ui-state-default">Worker 2</li> <li class="ui-state-default">Worker 3</li> <li class="ui-state-default">Worker 4</li> <li class="ui-state-default">Worker 5</li> </ul> <div class="total">Total: 5</div> </div> <div class="container"> <ul id="sortable2" class="droptrue"> <li class="ui-state-default">Worker 6</li> <li class="ui-state-default">Worker 7</li> <li class="ui-state-default">Worker 8</li> <li class="ui-state-default">Worker 9</li> <li class="ui-state-default">Worker 10</li> </ul> <div class="total">Total: 5</div> </div> <div class="container"> <ul id="sortable3" class="droptrue"> <li class="ui-state-default">Worker 11</li> <li class="ui-state-default">Worker 12</li> <li class="ui-state-default">Worker 13</li> <li class="ui-state-default">Worker 14</li> <li class="ui-state-default">Worker 15</li> </ul> <div class="total">Total: 5</div> </div>

拖放时显示位置和总计

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-11-02 16:11:28

拖放时显示位置和总计

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-11-02 16:11:28

解决方案1
0 已采纳 2016-11-02 16:11:28