Wie behebe ich ein Problem mit der Auswahl eines horizontal scrollenden Divs in JQuery? ⇐ HTML

[Guest]

jquery horizontal scrolling div > inside select
Problem: Select nicht öffnen (da im Mousedown-Ereignis „False“ zurückgegeben wird)
Wenn Löschen „False“ zurückgibt – beim Ziehen „Open“ auswählen.
Ich muss klicken und ziehen Scrollen wie bei Touch-Geräten: Wenn Sie auf „Auswählen“ klicken, wählen Sie „Öffnen“, wenn Sie auf „Auswählen“ ziehen, wählen Sie „Nicht öffnen“. Helfen Sie mit, das Problem zu beheben.
Demo: https://codepen.io/maxbeat/pen/LEPXjoo

Code: Select all

$('.scroll-container').mousedown(function (e) {
$(this)
.data('down', true)
.data('x', e.clientX)
.data('scrollLeft', this.scrollLeft)
return false;  // prevent default behavior
}).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');
});
// in case mouse slides off the block,
// to avid sticking to it
$(document).mouseup(function (e) {
$('.scroll-container')
.data('down', false)
.removeClass('dragging');
});

Code: Select all

.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 ; S t a t u s & 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 ; C o n f i r m e d & 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 ; R e q u i r e s   A t t e n t i o n & 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 ; D e n i e d & 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 ; S t a t u s & 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 ; C o n f i r m e d & 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 ; R e q u i r e s   A t t e n t i o n & 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 ; D e n i e d & l t ; / o p t i o n & g t ; < b r   / >                                 & l t ; / select>



Status


Confirmed
Requires Attention
Denied




Status


Confirmed
Requires Attention
Denied




Status


Confirmed
Requires Attention
Denied




Статус


Confirmed
Requires Attention
Denied




Статус


Confirmed
Requires Attention
Denied




Статус


Confirmed
Requires Attention
Denied




Статус


Confirmed
Requires Attention
Denied




Статус


Confirmed
Requires Attention
Denied




Статус


Confirmed
Requires Attention
Denied