jQuery-UI sortable: элементы перетаскиваются при использовании нескольких сортируемых таблиц

У меня есть ряд вложенных сортируемых элементов, демонстрирующих некоторое странное поведение с z-индексами.

в основном, в некоторых случаях элементы перетаскиваются в родительские контейнеры. Он появляется только после сортировки родительского элемента.

также похоже, что проблема позади только на элементах дальше по списку. Поэтому я могу перетащить в" более высокую " сортировку, но перетаскивание в "более низкую" сортировку и элемент перетаскивания внезапно позади.

детали:

дали сортируемый список A каждый элемент по очереди содержит список сортировки connect B (как и в списках B в каждом A все подключены)

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

Я играл с различными параметрами z-индекса через CSS и Jquery безрезультатно.

7
event-handling jquery jquery-ui jquery-ui-sortable

3 ответов

Я нашел обходной путь для этой проблемы.

при определении sortables, использовать:

appendTo: "body"
helper: "clone"

это полностью разбивает перетаскиваемые элементы из вложенного сортируемого z-порядка и решает проблему.

14

Я знаю, что это старая нить, но у меня было немного другое решение. После apending его тела я потеряла все свойства CSS. Мое решение создает мой собственный вспомогательный объект.

Javascript:

    appendTo: 'body',        
    helper: function(event, $item){
       var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
       return $helper; 
    },

в CSS

 .styled li{
      margin-left: 0px;
 }
 .styled{
      cursor:move;
      text-align:left;
      margin-left: 0px;
      padding: 5px;
      font-size: 1.2em;
      width: 390px;
      border: 1px solid lightGrey;
      background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-
      font-weight: normal;
      color: #555;
      list-style-type: none;
 }
2

довольно поздний ответ, но для тех, кто следует в будущем я обнаружил, что если вы перемещаете несколько элементов, вы можете переопределить вроде и остановка функции для установки Z-индекса элементов. Например:

sort: function(event, ui) {
    $(this).css('z-index', 1000);
},
stop: function(event, ui) {
    $(this).css('z-index', 0);
}

это обновит свойство z-index текущего элемента, гарантируя, что он всегда находится сверху. Поэтому эту идею можно распространить на сгруппированные элементы. Представьте себе:

sort: function(event, ui) {
    $('.element-group').each(function(index) {
        $(this).css('z-index', 1000);
    });
},
stop: function(event, ui) {
    $('.element-group').each(function(index) {
        $(this).css('z-index', 0);
    });
}
1