- Делаем блок контейнер с минимальной высотой во весь вьюпорт.
- Делаем в нём 2 "слота". Первый - верхний, где рисочка, за которую пользователь будет тянуть. Второй - сам контент.
- Позиционируем его фиксированно так, как больше нравится - вообще не видно, видно только рисочку, видно часть контента.
- На рисочку добавляем обработчик нажатия и тача. В момент, пока опущенна кнопка мыши или палец не оторван от экрана отслеживаем на документе позицию курсора\пальца.
- Ну и собственно по факту смещения указателя меняем позицию нашего контейнера.
- Чтобы у этого "окошка" были состояния стоит добавлять проверку. Например, если текущее состояние "закрыто\открыто" и передвинули вверх\вниз более чем на N пикселей, то менять состояние на противоположное.
- Не забываем снимать обработчики с документа когда кнопка мыши отжимается или палец убирается от экрана.
- В целом - профит.
Таким образом, состояния отвечают за то, как отобразить элемент. Спрятанным или раскрытым. При смене состояния меняется отображение.
Таким образом, не обязательно будет всё время открывать окошко пальцем. Сменили переменную состояния - оно открылось\закрылось.
Состояния можно хранить в css классах элемента.
