Интуитивно понятные индикаторы Sortable и Draggable UI - PullRequest
Новая
       28

Интуитивно понятные индикаторы Sortable и Draggable UI

2 голосов
/ 24 марта 2011

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

В jQuery Sortable UI demo Я вижу индикатор двойного arror, на некоторых сайтах есть две пунктирные черты в столбцах.

Поделитесь своим опытом, пожалуйста

Ответы [ 2 ]

2 голосов
/ 24 марта 2011

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

Я бы предпочел предположить, что все, что указывает на то, что элемент может быть «захватываемым» или «сортируемым», было бы отличной идеей.Стрелки работают, как и конические ручки на iOS (три горизонтальные, вставные полосы) - но ни одна из них не очевидна.Как всегда, картография в реальном мире является идеалом здесь ... но, поскольку практически все в "реальном мире" является манипулируемым, оно значительно усложняет задачу.Нет ничего, что действительно отображало бы реальный мир на пользовательский интерфейс, чтобы показать «способность к перетаскиванию».

Независимо от того, что вы решите использовать, вам, вероятно, придется дать совет конечному пользователю почто означают символы (возможно, всплывающая подсказка или простое разовое уведомление) ... так как это не всегда очевидно сразу.Лично я бы, вероятно, пошел со стрелками в стиле JQuery, чтобы показать список как сортируемый (но он все еще не особо выделяет возможность взаимодействия перетаскиванием ... нажимаю ли я стрелки, чтобы переместить их, или я нажимаюи перетащите, или есть какой-то другой механизм?).

2 голосов
/ 24 марта 2011

Для разметки областей перетаскивания я всегда использую опцию start перетаскиваемого объекта для добавления класса, для удаления класса я использую опцию stop.Примерно так: 

$(".draggable").draggable({
    start: function() {
        $('.droppable').addClass('droppableArea');
    },
    stop: function() {
        $('.droppable').removeClass('droppableArea');
    },
});

При перетаскивании файла всегда хорош класс при наведении курсора: 

$('.droppable').droppable({
    over: function() {
        $(this).addClass('droppableHover');
    },
    out: function() {
        $(this).removeClass('droppableHover');
    }
});

И ваш css: 

.droppableArea {
    border: 1px solid black;
}
.droppableHover {
    border: 1px solid red;
}

Вы можете проверить это в действии здесь

...