В моем приложении есть меню, в котором вы можете выбрать шаблоны и перетащить их в список компонентов. Я использую 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);
}
};
Как я могу заставить исходный список не показывать местозаполнитель? Я пытался сделать список источников не отсортированным, но потом он также не перетаскивается. Было бы лучше, если бы список источников был неизменным, и клон был бы создан, когда пользователь начнет перетаскивать элемент из меню.
Посмотреть кодировку
Видимая проблема с заполнителем решена, добавив следующее в css:
.sourcelist .component-placeholder {
display:none;
}
Я оставил кодэпин, чтобы показать, в чем проблема, в первую очередь.