Функция Jquery Sortable style с пустыми точками

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

До сих пор я писал: http://jsfiddle.net/mstefanko/LEjf8/9/

В основном это касается того, что я хочу сделать в небольшом масштабе.

Есть некоторые ошибки, и я не уверен, что это так хорошо, как можно было бы написать, может быть идиотом, чтобы не пытаться защелкнуться на jquery ui sortable. Но, если вам нужно сделать это без простого списка элементов, и, желая расширить его, чтобы включить несколько перетаскиваний, я хотел хотя бы пройти через то, что мне нужно было сделать, чтобы это произошло, даже если это было просто узнать, как сортировка таких функций.

Проблемный ребенок,

Это все в функции, вызываемой над событием overpable()

У меня есть массив пустых мест

    var emptyHolders = [];

    $('.pipeline-holder').each(function(){
        if($(this).hasClass('holder-empty')){
            var eid = $(this).attr('id');
            emptyHolders.push(eid.substring(14));
        }
    });

cid - это элемент droppable, над которым вы находитесь сверху, поэтому я нашел следующий открытый слот, используя

   for (var i = 0; i < emptyHolders.length; i++) {
        var currentEmpty = emptyHolders[i];
        if (currentEmpty > cid) {
            nextEmpty = currentEmpty;
            i = emptyHolders.length;
        } else {
            prevEmpty = parseInt(currentEmpty);
        }
    }

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

 if (nextEmpty != null) {
        var moveMe = nextEmpty -1;

        for (var i = moveMe; i >= cid; i--) {

            var nextcount = i + 1;
            var me = $('#pipeline-rank-' + i);       
            var next = $('#pipeline-rank-' + i).parents('.pipeline-rank-row').next().find('.pipeline-holder');
            var pid = $('#pipeline-rank-' + i).find('.content-wrapper').attr('id');

            next.append($('#pipeline-rank-' + i).find('.content-wrapper'));
            next.removeClass('holder-empty');
            next.siblings('.remember-my-position-hover').html(pid);
        }
         $('#pipeline-rank-' + cid).addClass('holder-empty');
    }

Если в списке нет ни одного дополнительного списка, я делаю то же самое в обратном порядке, чтобы проверить, есть ли место над droppable, чтобы вставлять элементы вверх.

Любые мысли очень оценены!

Ответ 1

Для чего-то вроде этого, вероятно, стоит непосредственно манипулировать элементами DOM и хранить ссылки на них в массиве, а не с помощью селекторов jQuery. Вы начали делать это с помощью emptyHolders, но я бы сделал это для всех контейнеров (исключаемых элементов).

Я бы сохранил два списка/массивы: один с состоянием до перетаскивания и один для отображения. Всякий раз, когда перетаскивание переместится над новым контейнером, я бы сначала reset состояние в состояние предварительного перетаскивания, а затем перепрограммировал измененное состояние, а затем покажу новое измененное состояние. (Чтобы избежать мерцания, на самом деле я бы не показывал состояние предварительного перетаскивания, просто reset мой внутренний список). Таким образом, вы избегаете максимально возможного нарушения списка с новым добавлением.

Чтобы создать пространство для нового элемента, я предлагаю следующее:

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

То есть, предполагая, что я правильно понимаю ваши потребности. Более распространенный случай - не допускать пустых мест в любом месте. Все вставки добавляют к концу списка или заголовку списка или перемещаются между двумя членами списка без добавления пробелов. Если вы отбрасываете что-то в списке, он сразу всплывает, пока он не перейдет в другой элемент или не станет первым элементом в списке.