Как изменить форму или внешний вид элементов управления пользовательского интерфейса jquery?

Question

Я работаю над проектом, в котором нужно много перетаскиваемых элементов в одном месте, я знаю, как создавать перетаскиваемые и перетаскиваемые элементы с различными вариантами, но я хотел бы сделать так, чтобы они выглядели нестандартно,Есть ли способ сделать это?Я безуспешно искал в Google «jquery change draggable shape» и другие варианты.

Answer 1

Зависит от того, сколько настроек вам нужно.Если вам просто нужна пара CSS-настроек, , то :

Перетаскиваемые элементы получают класс
ui-draggable
Во время перетаскивания элемент также получает класс
ui-draggable-dragging

Таким образом, вы можете указать свои изменения на .ui-draggable-dragging и любых других селекторах, которые вам нужно сузить.

Если вы хотите сделать что-то, чтотребуется больше, чем просто пара CSS-настроек, тогда вы можете отрисовать всю перетаскиваемую версию самостоятельно с помощью опции helper :

Позволяет использовать вспомогательный элемент для перетаскивания.дисплей.Возможные значения: «оригинал», «клон», функция.Если указана функция, она должна возвращать элемент DOME.

Так что подобное может предложить большую гибкость:

$(...).draggable({
    //...
    helper: function(e) {
        return $('a bunch of pretty HTML');
    }
 });

Answer 2

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

Не пробовал с недавним выпуском jquery ui, но это все равно должно работать.

Затем вы можете применить CSS к своему классу.

Если вы действительно хотите сойти с ума, вы также можете добавить другие html-элементы в элемент ui.helper при возникновении события start. Просто используйте стандартный jquery append, prepend, whatnot ..

Answer 3

У вас есть возможность изменить внешний вид всех стилей jQuery ui с помощью css.У них даже есть генератор тем, чтобы легко настроить внешний вид здесь