два связанных списка с angular-ui / ui-sorttable, отключить заполнитель в одном, а включить его в другом

0

В моем приложении есть меню, в котором вы можете выбрать шаблоны и перетащить их в список компонентов. Я использую angular-ui ui-sortable для двух связанных списков.

Я использую пользовательский заполнитель. К сожалению, он также отображается в списке источников.

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

ctrl.sortableSrcOptions = {
    placeholder: {
        element: function (currentItem) {
            return $("<div class='component-placeholder'>Place here</div>")[0];
        },
        update: function (container, p) {
            return;
        }
    },
    connectWith: ".componentlist",
    stop: function (e, ui) {
        if (ui.item.sortable.droptarget.hasClass('componentlist')) {
            //add all properties required by items in destination list
        }
    }

};

Когда список адресата получает элемент, список источников восстанавливается.

ctrl.sortableDestOptions = {
    receive: function (e, ui) {
        //restore original menu
        ctrl.src = angular.copy(ctrl.originalSrc); 
    }
};

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

Посмотреть кодировку

Теги:
angular-ui

1 ответ

0

Видимая проблема с заполнителем решена, добавив следующее в css:

.sourcelist .component-placeholder {
    display:none;
}

Я оставил кодэпин, чтобы показать, в чем проблема, в первую очередь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню