Пример на jsfiddle
//Скрол мышкой
window.onload = function() {
var scr = $(".scroll");
scr.mousedown(function() {
var startX = this.scrollLeft + event.pageX;
var startY = this.scrollTop + event.pageY;
scr.mousemove(function() {
this.scrollLeft = startX - event.pageX;
this.scrollTop = startY - event.pageY;
return false;
});
});
$(window).mouseup(function() {
scr.off("mousemove");
});
};
//Скрол мышкой
$(function() {
$('.block').draggable({
revert: true,
zIndex: 100,
revertDuration: 0,
helper: "clone"
});
});
.scroll {
height: 200px;
overflow-x: auto;
width: 300px;
cursor: all-scroll;
display: flex;
}
.block {
padding: 5px;
border: 1px solid #000;
margin: 5px;
background: #fff;
width: 100px;
}
.sortable.hover {
background: #cac3c3;
}
.sortable {
border: 1px solid red;
padding: 25px 5px 5px;
width: 120px;
height: 100%
}
.title {
position: absolute;
top: 15px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="scroll">
<div class="sortable" data-block="1">
<div class="block">
Блок1
</div>
<div class="block">
Блок2
</div>
<div class="block">
Блок3
</div>
</div>
<div class="sortable" data-block="2">
<div class="block">
Блок11
</div>
<div class="block">
Блок12
</div>
<div class="block">
Блок13
</div>
</div>
<div class="sortable" data-block="3">
<div class="block">
Блок11
</div>
<div class="block">
Блок12
</div>
<div class="block">
Блок13
</div>
</div>
</div>
В чем проблема: у меня еще стоит `draggable` и когда используется скрипт скролла, он не дает работать `draggable`
То есть они не хотят работать вмести, либо скролл либо драг
Как сделать, чтобы они работали вмести, может есть другой скрипт скролла мышкой
Если я правильно понимаю, то `scr.mousedown` перехватывает все движения мышки, можно как-то оградить `block` от `mousedown` и `mouseup`?