Wie behebe ich ein Problem mit der Auswahl eines horizontal scrollenden Divs in JQuery?
Posted: 25 Jan 2025, 10:24
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
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