Draggable onClick doesn't fire (need double click)

[ncou]

Hi,

 

I got a problem who is driving me crazy.

I try to made a draggable element "clickable".

In the documentation this seems easy, you need to define the onclick function, and add the boolean "dragClickables" as true.

 

I made a quick fork from an existing codepen to add a onclick function with a console.log message.

 

 

I get the "onclick" event to fire but only if i double click

 

can you point me my mistake ?

 

Thank you.

 

Keep up the good work, your library is awsome !

See the Pen KgpPrR?editors=0010 by anon (@anon) on CodePen

[Carl]

Hi, that isn't exactly a basic Draggable demo. 

 

That was created by our moderator Blake which illustrates some extremely advanced usage of Draggable. Please read the comments at the top of the demo paying attention to the part I bolded:

 

HOW IT WORKS...

 

The app starts off by creating clones for each tile using the scope listed below.

When the user clicks on a tile, startDraggable is called, which enables the 

draggable instance to be dragged. When this happens, the real tile is hidden, 

with the clone taking its place. Because the clone is not actually inside the 

overflow container, it can be dragged anywhere. When the dragging stops, the clone

goes back to a hidden state.

 

I am pretty sure you are not performing a click on a Draggable element when you select a letter. You are clicking on a letter which then enable's that letter's clone which is Draggable. So what you saw as a double-click being needed to fire an onClick was really the first click making the Draggable element visible and the second click being registered as the onClick of the Draggable.

 

If you want what appears as the first click to fire something edit the startDraggable function like:

 

// START DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function startDraggable(event) {
  
//   ********* FIRST CLICK ************************ //
console.log("first click")


  var letter = event.data;


  // Maak element onzichtbaar
  // Maak kloon zichtbaar en verplaats deze naar de coordinaten van het element
  TweenLite.set(letter.element, { autoAlpha: 0 });
  TweenLite.set(letter.clone, { x: letter.x, y: letter.y, autoAlpha: 1 });


  letter.draggable.startDrag(event.originalEvent);
}

 

 

 

 

Again, its a very complex setup. I can assure you that Draggable's onClick works as explained in the docs.

Please see: http://codepen.io/GreenSock/pen/Nxvvpo?editors=0011

[ncou]

Hi,

 

Thank you for your quick answer.

The codepen is quite complexe (and a very good example from Blake), I understand the clone disturb the first click, and it's work on the second click. But it's still a bit obscure.

 

for example, the "onDrag" or "onPress" events are catched on the clone, so why not the onclick ?

There is also the case when you add a custom click event on the original object, and it's not called (from my comprehension, if you use the jquery ".clone(true)" function it keep the event, so the custom click function from the original item should be passed to the cloned, and at least fired when you click on the clone ? no ?).

 

I got a working workaround for my problem, but i am interested in your answer from my previous questions (sorry for my poor english).

 

PS : here is the workaround (store the mouse position before the drag and check at the drag release if there a is a delta of less the 2 pixels, it's a click we fire the original click event) :

 

PS2 : if there is a more clean workaround, let me know.

 

Thank you for your help, have a good day.

function startDraggable(event) {
  ....
  window.draginfo = {x: event.pageX, y: event.pageY};


function dragElement(e) {

    // check if the tile is moved (if not moved we can use this to detect a click)
    if (!tile.moved) {
      var x = window.draginfo.x - e.pageX;
      var y = window.draginfo.y - e.pageY;

      if (!(x < 2 && x > -2) || !(y < 2 && y > -2)) {
        // if the mouse cursor move more than 2 pixels (on X or Y axis), we consider the tile is moved
        tile.moved = true;
      }
    }


function dropTile(e) {
.....
    // check if the element is only clicked
    if (!tile.moved) {
      // fire the original "click" event on the object
      tile.element.trigger("click");
    }

[Carl]

Sorry, I'm not familiar enough with Blake's demo to answer specific questions about it. I'm not exactly sure of how clone is being used or how the events are handled.

 

im happy to hear you found a solution.