Question

88

Preventing click event with jQuery drag and drop

rated 0 times [ 90] [ 2] / answers: 1 / hits: 79109 / 15 Years ago, fri, november 20, 2009, 12:00:00

I have elements on the page which are draggable with jQuery. Do these elements have click event which navigates to another page (ordinary links for example).

What is the best way to prevent click from firing on dropping such element while allowing clicking it is not dragged and drop state?

I have this problem with sortable elements but think it is good to have a solution for general drag and drop.

I've solved the problem for myself. After that I found that same solution exists for Scriptaculous, but maybe someone has a better way to achieve that.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Webpack processAssets hook and asset source

Sat, Jan 2, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

View All

answered 15 Years ago efren · Accepted Answer

Solution is to add click handler that will prevent click to propagate on start of drag. And then remove that handler after drop is performed. The last action should be delayed a bit for click prevention to work.

Solution for sortable:

...

.sortable({

...

        start: function(event, ui) {

            ui.item.bind(click.prevent,

                function(event) { event.preventDefault(); });

        },

        stop: function(event, ui) {

            setTimeout(function(){ui.item.unbind(click.prevent);}, 300);

        }

...

})

Solution for draggable:

...

.draggable({

...

        start: function(event, ui) {

            ui.helper.bind(click.prevent,

                function(event) { event.preventDefault(); });

        },

        stop: function(event, ui) {

            setTimeout(function(){ui.helper.unbind(click.prevent);}, 300);

        }

...

})