Пользовательский интерфейс jQuery с изменяемым размером области обработки/чувствительности/допуска

Я использую jQuery ui resizable, и я (лично) считаю, что это похоже на видеоигру, чтобы прибить область попадания, когда вы пытаетесь изменить размер элемента.

Кажется, что область попадания — это один пиксель на краю div! ВТ...

Кто-нибудь знает, как увеличить область удара / допуск рукоятки, чтобы вам не приходилось двигать мышью, как хирург, чтобы схватить край вашего div?


jquery resizable handles
person Kirk Ross    schedule 09.05.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Ручки изменяемого размера имеют класс ui-resizable-handle . Вы можете стилизовать эти классы в соответствии с вашими удобствами и выбором. Вы можете увеличить их размер, размеры, формы и т. д. Например:

.ui-resizable-handle{width:0;height:0;border:4px solid blue;border-radius:10px;}

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

.ui-resizable-handle{width:0;height:0;border:4px solid blue;}

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

Демонстрация: http://jsfiddle.net/lotusgodkk/GCu2D/92/

person K K    schedule 09.05.2014
comment
Сейчас у меня работает размер, но мне нужно предотвратить перемещение ручки при использовании полосы прокрутки. См. эту скрипту jsfiddle.net/kirkbross/Vcz4h/3 - person Kirk Ross; 10.05.2014
comment
Добавьте в обработчик основание: 0, чтобы оно оставалось зафиксированным внизу. - person K K; 10.05.2014

arrow_upward
2
arrow_downward

Вы можете передать ссылки jquery на дескрипторы следующим образом:

$('#elementResizable').resizable({
    handles: {
        'n': '#ngrip',
        'e': '#egrip',
        's': '#sgrip',
        'w': '#wgrip'
    }
});

Демо, которое я нашел

person terpinmd    schedule 09.05.2014
comment
Как остановить движение ручки при использовании полосы прокрутки? Скрипт: jsfiddle.net/kirkbross/Vcz4h/3 - person Kirk Ross; 10.05.2014