jQuery sortables - проблема с подключением - PullRequest
Новая
       51

jQuery sortables - проблема с подключением

1 голос
/ 24 мая 2011

У меня есть два примера на jsFiddle:

Пример 1

В первом я могу перемещать элементы списка, даже из дочернего элемента в корневой элемент. Тем не менее, это не очень легко сделать его "оснасткой".

Пример 2

Во втором примере я разместил элементы списка. На этот раз я не могу заставить их «привязаться» к дочерним элементам.

Вопросы

  • Есть ли хороший способ облегчить защелкивание?
  • Как мне решить с помощью float?

Ответы [ 2 ]

4 голосов
/ 25 мая 2011

В сортировке jQuery есть недокументированная опция, позволяющая определить элемент, для которого проверяется допуск: toleranceElement.Если не установлено, весь элемент проверяется на размещение (включая вложенный список), но если он установлен, учитываются только подпункты, соответствующие селектору.

Это означает, что вам нужно изменить разметку HTMLнемного, чтобы обернуть основное содержимое элемента списка (текст элемента в вашем случае) в элемент и использовать его для проверки расположения сортировки.Это исключит вложенные <ul> с, эффективно останавливая дрожание, которое в противном случае весьма серьезно.

HTML: 

<div id="example5"> 
    <ul> 
        <li ><div>Item 1</div>
            <ul> 
                <li ><div>Item 1 1</div><ul></ul></li> 
                <li ><div>Item 1 2</div><ul></ul></li> 
                <li ><div>Item 1 3</div><ul></ul></li> 
            </ul> 
        </li> 
        <li ><div>Item 2</div><ul></ul></li> 
        <li ><div>Item 3</div><ul></ul></li> 
        <li ><div>Item 4</div><ul></ul></li> 
    </ul> 
</div>

Javascript: 

$("#example5 ul").sortable({
    connectWith: "#example5 ul",
    placeholder: "ui-state-highlight",
    toleranceElement: 'div'
});

модифицированные демки здесь и здесь .

Возможно, вы также захотите поиграть с opacity, cursorAt и tolerance.Взгляните на документацию .

Обратите внимание, что это не идеальное решение, если вы не удовлетворены результатами, посмотрите на использование плагина.Плагин Manuele J Sarfatti nestedSortable выглядит как то, что вам может пригодиться: http://mjsarfatti.com/sandbox/nestedSortable/

0 голосов
/ 24 мая 2011

Я смотрю на оба ваших примера в Safari и могу без проблем перемещать любой элемент в / из дочерних элементов.

Вот почему №2 сложнее в использовании ...

«Зона выпадения» в примере # 2 настолько же высока, как и ваш элемент, поэтому с вашими короткими элементами у вас будет гораздо меньшая область, в которую ваша мышь попадет.

«Зона выпадения» в примере № 1 очень широка, поэтому ее очень легко поразить при перемещении мыши вверх / вниз по списку.

Единственный способ решить вашу проблему - это просто сделать ваши предметы в примере №2 выше, имитируя, таким образом, то, что у вас есть в примере № 1, кроме как на его стороне.

http://jsfiddle.net/9uhfX/3/

...