jquery horizontal scrolling div > inside select
problem: select dont open (because return false in mousedown event)
if delete return false – select open when dragging.
I need click and drag scrolling like touch devices: if click on select – select open, if dragging on select – select not open. Help fix it.
Demo: 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: 10px;
}
<div class="scroll-container">
<div class="list">
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
<div class="button">
<div class="button__title">Статус</div>
<div class="button__select">
<select class="ui__button-select" required>
<option value="1" selected>Подтвержден</option>
<option value="3">Требует внимания</option>
<option value="4">Отклонен</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>