Jquery must not fire click event if mousebutton realised over a certain div

Question

I'm new to the world of front-end development so please keep it a bit simple for me and forgive my noobischness :).

I have created a click and drag-like portfolio. See it here: http://jackgommeren.nl/

My problem

The current problem which I have is that I have to force my users to click twice on a certain element which contains a portfolio-piece to open and view it.

What i would like to do

I would like my users to just click and drag around in the portfolio and give a single click on an element to open a specific piece of my portfolio. However, problem with that is when the user would click on a specific portfolio-item and drag the mouse around to navigate to somewhere, and would release the mousebutton on that same portfolio-item.. that the item opens up, while the user only intended to navigate.

Possible solution

I know that a solution might be found if I could fire an if-statement if the user releases the mouse button on an element.. or if the user has started dragging before releasing the mouse button.. but I have no idea how to code this in Jquery/Javascript.

Could somebody help me on this?

Many thanks in advance! :)

Answer 1

I checked your code and I suggest you to

1- create a global variable named for example : dragged.

2- on dragStop : set its value to true

function dragStop() {
    dragged = true;
    // Your code here
}

3- In your functions MyFunction_overmij, MyFunction_blog, ... check on this variable (dragged) value.

function MyFunction_overmij() {
    if(dragged) {
        dragged = false;
        return;
    }
    //your code here
}

//and so on

Note the variable value re-initialization to false so that the next click on any button would work with no issue.

Hope it helps!

Answer 2

we cannot code it for you, but we can help you get to the result you want to achieve.

You should take a look at the documentation : http://api.jquery.com/category/events/mouse-events/ (mouseup seems the way to go ...)

And think about what you should detect : if the user has moved between the moment he clicks and the moment he releases the button, he is trying to move, not to open the tile. It should then be easy to code.

Don't hesitate to post what you tried on jsFiddle for example, and we will help you get to the solution.

Good luck

Answer 3

check if item was being dragged and cancel the click event that would open the hex much like @user3165879 described