Использование нескольких сортируемых элементов jQuery UI с перекрывающимися списками - PullRequest
Новая
       0

Использование нескольких сортируемых элементов jQuery UI с перекрывающимися списками

1 голос
/ 01 сентября 2011

Я пытаюсь написать страницу, которая позволит пользователям перетаскивать элементы между двумя списками и изменять их порядок.

У меня есть основной список слева и список "ведро" справа. Идея состоит в том, чтобы позволить пользователям размещать элементы в корзине в качестве области хранения, пока они перемещаются по странице (основной список может быть довольно длинным, поэтому полезно позволить им размещать элементы в корзине, пока они прокручивают куда-то еще, чтобы уронить их)

Для этого я поместил «корзину» в фиксированном месте на странице, чтобы он прокручивался вместе с пользователем. Из-за разных размеров браузера, «ведро» может перекрываться с основным списком. Когда это происходит, и элемент перетаскивается из основного списка в корзину, корзина не получит элемент, если курсор мыши находится в области перекрытия между основным списком и корзиной.

Чтобы воспроизвести проблему:

Вот некоторый HTML-код для воспроизведения проблемы (он имитирует ситуацию, когда корзина перемещается поверх основного списка): 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <style>
      ul { list-style-type: none; margin: 0; padding: 0; border: 1px solid #777; }
      li { margin-bottom: 2px; background-color: #EEE; border-bottom: 1px solid #BBB; width: 300px; height: 40px; }
      #main-list { z-index: -1; width: 300px; }
      #bucket { width: 202px;  position: fixed; top: 20px; left: 250px; border: 3px solid #CCC; }
      #bucket-list { z-index: 999; min-height: 300px; width: 200px; }
      #bucket-list li { width: 200px; }
      .placeholder { background-color: #28D; }
    </style>
    <script>
        $(function() {
            $( "#main-list, #bucket-list" ).sortable({
                scroll: false,
                connectWith: ".connectedSortable",
                placeholder: "placeholder",
                tolerance: "pointer"
            }).disableSelection();
        });
    </script>
</head>
<body>
    <ul id="main-list" class="connectedSortable">
        <li>Foo1</li>
        <li>Foo2</li>
        <li>Foo3</li>
        <li>Foo4</li>
        <li>Foo5</li>
        <li>Foo6</li>
        <li>Foo7</li>
        <li>Foo8</li>
        <li>Foo9</li>
        <li>Foo10</li>
        <li>Foo11</li>
    </ul>

    <div id="bucket">
        <ul id="bucket-list" class="connectedSortable">
            <li>Bar1</li>
            <li>Bar2</li>
            <li>Bar3</li>
        </ul>
    </div>
</body>
</html>

Визуализируйте HTML-код в браузере, щелкните и перетащите элемент «Foo6» в список «Панель» (область). Медленно перетащите элемент в сторону сегмента и обратите внимание, что элемент перетаскивания не распознается блоком, пока курсор не пересечет границу, где два списка перекрываются.

Вопрос:

В ситуации, когда два сортируемых jQueryUI перекрываются, я бы хотел, чтобы сортируемая визуально сверху находилась перетаскиваемой, когда на нее помещается перетаскиваемая, а не сортируемая визуально внизу.
Как я могу это сделать?

Спасибо!

...