jquery ui sortable child items with sortable parent item scroll issue for window auto scroll
Hi,
I am using jquery ui sortable to apply the sortable feature into our application.
I have sortable parent items with sortable child items.
I am facing problem when we start to sorting the child items then window not auto scroll for next siblings item but it will work fine on parent sortable items.
i write some code on sort event to achive this
CSS:
.left-handle{
background: red none repeat scroll 0 0;
height: 100%;
opacity: 0.5;
position: fixed;
width: 15px;
z-index: 999;
top:0;
bottom:0;
left:0;
}
.right-handle{
background: red none repeat scroll 0 0;
bottom: 0;
float: right;
height: 100%;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
width: 15px;
z-index: 999;
}
.handle-touched{
background: green none repeat scroll 0 0;
}
JS:
sort: function (event, ui) {
if (event.pageX >= $scope.left_pos) {
$scope.disableLeftRightHandle('left'); // code for disable handle as per direction
} else {
$scope.disableLeftRightHandle('right');
}
if (jQ('.left-handle').hasClass("handle-touched")) {
jQ('.right-handle').hasClass("handle-touched");
scrollToLeft();
}
if (jQ('.right-handle').hasClass("handle-touched")) {
jQ('.left-handle').hasClass("handle-touched");
scrollToRight();
}
}
function scrollToLeft() {
jQ("html,body").animate({
scrollLeft: "-=10",
}, 200, function () {
// Animation complete.
});
}
function scrollToLeft() {
jQ("html,body").animate({
scrollLeft: "-=10",
}, 200, function () {
// Animation complete.
});
}
$timeout(function () {
$scope.left_pos = event.pageX;
}, 50);
//$scope.left_pos = event.pageX;
it works fine on browser but not working on mobile and touch devices.
i think the issue happen because of the following assigning new value to old one
$timeout(function () {
$scope.left_pos = event.pageX;
}, 50);
//$scope.left_pos = event.pageX;
i don't know whats going wrong there.
please suggest the solution for it