Đây là một vấn đề không rõ ràng, nhưng tôi đang sử dụng jQuery Sortables và cố gắng lấy hai danh sách được kết nối hoạt động cùng nhau độc đáo khi được định vị là fixed. Tất cả đều hoạt động tốt cho đến khi bạn cuộn trang một chút sao cho hai danh sách cuối cùng được định vị trên đầu trang của nhau. Sau đó, các danh sách dường như bị nhầm lẫn là người nào sẽ nhận được mục đang được kéo, có nghĩa là bạn nhận được một loạt các jittering xảy ra khi nó xuất hiện/biến mất trong mỗi danh sách. Có vẻ như vấn đề là cả hai danh sách đều xử lý các sự kiện chuột/sắp xếp vì mục đang được kéo kỹ thuật trên cả hai danh sách, nhưng những gì tôi muốn là có danh sách xếp chồng (tức là position: fixed) nuốt các sự kiện để danh sách chính cơ bản không cố gắng nhận mục.Xử lý danh sách sắp xếp jQuery chồng chéo
Dưới đây là mã tối thiểu dụ:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style type="text/css">
ul { list-style-type: none; padding: 0; float: left; }
li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; }
#overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; }
#overlayed li { width: 50px; float: left; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable({ connectWith: "ul", opacity: 0.6 }).disableSelection();
});
</script>
</head>
<body>
<div id="overlayed">
<ul>
<li>Item X</li>
<li>Item Y</li>
<li>Item Z</li>
</ul>
</div>
<br/><br/><br/><br/><br/>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</body>
</html>
Vậy câu hỏi là, làm thế nào để khắc phục nó?
Đi sâu vào mã thư viện, tìm hiểu chức năng bạn đang sử dụng thực sự hoạt động như thế nào, khi đó bạn sẽ có thể giải quyết vấn đề của mình. – aaaaaaaaaaaa