I am using drag and scroll in my page, which is working with the 3 simple handlers mousedown, mousemove and mouseup.
Now i have 2 Issues:
.on('click'
and .click(
events are kind of broken, because since the div is scrolling with the mouse, the cursor stays on the same object and the event fires. How can i change the handler so it only fires when the distance of mousemove between mousedown and mouseup is less than a fixed value? Is it even possible or do i have to create an own one and change all the code? ---SOLVED--- event.preventDefault();
during this drag&scroll to prevent Selection. This results in the user not being able to click on form fields. Is there an easy way to fix this or do i have to stop the selection in another way? ---SOLVED WITH WORKAROUND--- Any ideas would be helpful.
These are the 3 handlers for scrolling:
mouseDownHandler : function(event) {
if (!$(event.target).closest('.stopscroll').length) {
event.data.lastCoord = {left: event.clientX, top: event.clientY};
$.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
$.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );
$('body').addClass('dragcursor'); //// Add Move Cursor
if (!$(event.target).closest('.noformelement').length) {
event.preventDefault();
return false;
}
}
},
mouseMoveHandler : function(event) {
var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};
event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);
$('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header
event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);
event.data.lastCoord={left: event.clientX, top: event.clientY}
if (!$(event.target).closest('.noformelement').length) {
event.preventDefault();
return false;
}
},
mouseUpHandler : function(event) {
$.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
$.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
$('body').removeClass('dragcursor');
if (!$(event.target).closest('.noformelement').length) {
event.preventDefault();
return false;
}
}
Update/Bump: Just disabling EVERY click event at once would already solve the problem i guess. I tried $(document).on('click', '*', function() {return false;});
but it does not work...
Solved with
mouseDownHandler : function(event) {
if (!$(event.target).closest('.stopscroll').length) {
event.data.lastCoord = {left: event.clientX, top: event.clientY};
event.data.startCoord = {left: event.clientX, top: event.clientY};
event.data.allowClick = true;
$('*').off('click.stop');
$.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
$.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );
if (!$(event.target).closest('.noformelement').length) {
event.preventDefault();
return false;
}
}
},
mouseMoveHandler : function(event) {
var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};
var range = {left: (event.clientX - event.data.startCoord.left), top: (event.clientY - event.data.startCoord.top)};
if (event.data.allowClick && (Math.abs(range.left)>=5 || Math.abs(range.top)>=5)) {
event.data.allowClick = false;
$('*').on('click.stop', function() {return false;});
$('body').addClass('dragcursor'); //// Add Move Cursor
}
event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);
$('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header
event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);
event.data.lastCoord={left: event.clientX, top: event.clientY}
if (!$(event.target).closest('.noformelement').length) {
event.preventDefault();
return false;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.