Мобильная версияпроблема: выберите не открывать (потому что возвращает false в событии mousedown)
если удалить, верните false - выберите «Открыть» при перетаскивании.
Мне нужно щелкнуть и перетащить прокрутка как у сенсорных устройств: если нажать на выбрать - выбрать открыть, если перетащить на выбрать - выбрать не открывать. Помогите это исправить.
Демо: https://codepen.io/maxbeat/pen/LEPXjoo
Код: Выделить всё
$('.scroll-container').mousedown(function (e) {
$(this)
.data('down', true)
.data('x', e.clientX)
.data('scrollLeft', this.scrollLeft)
return false; // предотвращаем стандартное поведение
}).mousemove(function (e) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - e.clientX;
$(this).addClass('dragging');
}
}).mouseup(function (e) {
$(this)
.data('down', false)
.removeClass('dragging');
});
// если мышка соскакивает с блока, чтобы не залипала потом на нем
$(document).mouseup(function (e) {
$('.scroll-container')
.data('down', false)
.removeClass('dragging');
});Код: Выделить всё
.scroll-container {
overflow-x: auto;
padding: 10px;
width: 800px;
cursor: grab;
}
.dragging {
cursor: grabbing;
}
.list {
display: flex;
gap: 20px;
width: max-content;
}
.button {
font-family: arial, helvetica, serif;
background: #ccc;
width: fit-content;
padding: 15px;
border-radius: 1 0 p x ; < b r / > } < / c o d e > < b r / > < p r e c l a s s = " s n i p p e t - c o d e - h t m l l a n g - h t m l P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; d i v c l a s s = " s c r o l l - c o n t a i n e r " & g t ; < b r / > & l t ; d i v c l a s s = " l i s t " & g t ; < b r / > & l t ; d i v c l a s s = " b u t t o n " & g t ; < b r / > & l t ; d i v c l a s s = " b u t t o n _ _ t i t l e " & g t ; С т а т у с & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " b u t t o n _ _ s e l e c t " & g t ; < b r / > & l t ; s e l e c t c l a s s = " u i _ _ b u t t o n - s e l e c t " r e q u i r e d & g t ; < b r / > & l t ; o p t i o n v a l u e = " 1 " s e l e c t e d & g t ; П о д т в е р ж д е н & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n v a l u e = " 3 " & g t ; Т р е б у е т в н и м а н и я & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n v a l u e = " 4 " & g t ; О т к л о н е н & l t ; / o p t i o n & g t ; < b r / > & l t ; / s e l e c t & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " b u t t o n " & g t ; < b r / > & l t ; d i v c l a s s = " b u t t o n _ _ t i t l e " & g t ; С т а т у с & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " b u t t o n _ _ s e l e c t " & g t ; < b r / > & l t ; s e l e c t c l a s s = " u i _ _ b u t t o n - s e l e c t " r e q u i r e d & g t ; < b r / > & l t ; o p t i o n v a l u e = " 1 " s e l e c t e d & g t ; П о д т в е р ж д е н & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n v a l u e = " 3 " & g t ; Т р е б у е т в н и м а н и я & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n v a l u e = " 4 " & g t ; О т к л о н е н & l t ; / o p t i o n & g t ; < b r / > & l t ; / s e l e c t & g t ; < b r / >
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Статус
Подтвержден
Требует внимания
Отклонен
Подробнее здесь: https://stackoverflow.com/questions/793 ... olling-div
