Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onclick and draggable conflict #306

Open
michaelchandrag opened this issue Aug 29, 2018 · 6 comments
Open

onclick and draggable conflict #306

michaelchandrag opened this issue Aug 29, 2018 · 6 comments

Comments

@michaelchandrag
Copy link

michaelchandrag commented Aug 29, 2018

Hello,
I have some issues when trying to click my element which is 'a href' and the parent is a div with draggable class.
The code is 100% fine on computer's browser however when i use touch punch for mobile.
The div which has draggable class is triggered first, before the onclick happened.
Onclick is only occuring, if the user need to be patient about how they click on the element. It is like 1 out of 10 click.

I've tried adding a delay parameter with jQuery UI on draggable function, the onclick function is not triggered while the function is always waiting for draggable triggered.
How do i resolve this issue?
This is my HTML code

<div class="dragable" id="cDrag" style="width:100%;height:100%;">
    <a id="card" href="javascript:void(0);" class="aCardUserLabel" onclick="ajaxModalCard()">
       <div class="card-action" style="background-color:white;color:black;border-radius:5px;margin-top:8px;">
       <div class="left-align black-text" style="word-wrap:break-word;" id="cardTitle"></div>
        </div>
    </a>
</div>

This is my JS code

$( ".dragable" ).draggable({
        appendTo :"body",
        helper:"clone",
        grid: [1, 1],
        revert:false,
        connectToSortable:".sortable",
        start: function(e, ui)
         {
          var draggableId = e.target.id;
          var width = $("#"+draggableId).css("width");
          var height = $("#"+draggableId).css("height");
          $(ui.helper).css("width",172);
          $(ui.helper).css("height",height);
         },
         stop : function (e,ui)
         {
         }
    });
@michaelchandrag
Copy link
Author

update: i resolved this issue by giving 'cancel' parameter on draggable function to element with id card title.

@smurfxx
Copy link

smurfxx commented Sep 10, 2018

Can you provide an example please?

@michaelchandrag
Copy link
Author

@smurfxx

$( ".dragable" ).draggable({
appendTo :"body",
helper:"clone",
grid: [1, 1],
revert:false,
cancel:'.restrictedArea', <-- added parameter
connectToSortable:".sortable",
start: function(e, ui)
{
var draggableId = e.target.id;
var width = $("#"+draggableId).css("width");
var height = $("#"+draggableId).css("height");
$(ui.helper).css("width",172);
$(ui.helper).css("height",height);
},
stop : function (e,ui)
{
}
});

@dexterial
Copy link

The issue is caused by some browsers triggering 2 or multiple move events immediately after touch start and that triggers ._touchMoved = true, that stops execution on click event in touch end. One logical workaround is to enhance the trip logic and instead of the true false this._touchMoved, set a timer that trips for short touch events, see fix that worked for me

AMEND in the mouseProto._touchStart:

// Track movement to determine if interaction was a click
self._touchMovedTrip = 200; // this is the max interval in ms for click to register as click
self._touchMoved = Date.now();

DELETE in the mouseProto._touchMove:
// Interaction was not a click
this._touchMoved = true;

AMEND in the mouseProto._touchEnd:
this._touchMoved = Date.now() - this._touchMoved;
if (this._touchMoved<this._touchMovedTrip) {
// Simulate the click event
simulateMouseEvent(event, 'click');
}

@dexterial
Copy link

one other solution (hack of a hack) is to check distance traveled on mouse move and trigger click if 0...but that might be trickier and costly to pull...

@RWAP
Copy link

RWAP commented Jul 6, 2019

My fork has implemented a similar solution - it assumes that you mean a click if you hold your finger down for less than 500ms, or if you move your finger less than 10px in any direction

https://github.com/RWAP/jquery-ui-touch-punch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants