Вопросы Теги

Работа с перекрывающимися сортируемыми списками jQuery

Это немного неясная проблема, но я использую jQuery Sortables и пытаюсь заставить два связанных списка хорошо работать вместе, когда один расположен как fixed . Все работает нормально, пока вы немного не прокрутите страницу так, чтобы два списка оказались расположены друг над другом. Затем списки, кажется, путаются относительно того, какой из них должен получать перетаскиваемый элемент, а это означает, что вы получаете кучу дрожания, когда он появляется / исчезает в каждом списке.

Похоже, проблема в том, что оба списка являются обработка событий мыши / сортировки, поскольку перетаскиваемый элемент технически находится над обоими списками, но я хочу, чтобы наложенный список (т.е. позиция : фиксированная ) поглощал события, чтобы основной основной список не пытается получить элемент.

Вот минимальный пример кода: 

<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>

Итак, вопрос в том, как это исправить?

9
задан Alconja 4 November 2010 в 00:10
поделиться