Основная проблема, связанная с jqueryui в моем проекте

Question

У меня есть вопрос относительно функции перетаскивания jquery ui. Я создаю веб-приложение, где пользователь может создать свой собственный объект, перетащив часть из области детали (полки) на сцену). Этот этап будет содержать основной компонент, который будет в основном круглым по своему характеру, на котором будут размещены эти подкомпоненты/части.

Эти части являются изображениями 200px x 400px с прозрачным фоном и перетаскиваются. Их можно сбросить на сцену. Теперь вот проблема i m:

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

Есть ли решение, с помощью которого я могу преодолеть эту проблему перекрытия.

платформы разработки является JQuery UI и .net

Answer 1

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

Вы не предоставили много информации, кроме контекста, например, какой плагин вы используете для перетаскивания.

Я сделал быстрый пример, используя jQuery UI Droppable. В файле drop event вы добавляете класс css к отброшенному элементу, доступному через ui.draggable. Вы также можете привязать out event, чтобы удалить класс, если ваши элементы могут быть вытащены из цели.

$("#droppable").droppable({ 
    drop: function(event, ui) { 
     $(ui.draggable).addClass('small'); 
    }, 
    out: function(event, ui) { 
     $(ui.draggable).removeClass('small'); 
    }, 
});​ 

DEMO

Я полагаю, вы могли бы адаптировать этот метод для вас собственной реализации.