How to disable default drag and drop behaviour

There’s a feature of browsers that allows to drag and drop elements such as links, images, etc. Sometimes this behaviour may be undesirable, for example, when you’re implementing your own special drag and drop. In this short note I’ll provide a small JavaScript code snippets that prevent a default drag and drop behaviour.

The following code snippet will disable a default drag and drop behaviour for all the elements:

  $(document).bind("dragstart", function(event) {
    event.preventDefault();
  });

This code snippet prevents default drag and drop behaviour only for hyperlinks:

  $(document).bind("dragstart", function(event) {
    if (event.target.tagName.toLowerCase() === "a") {
      event.preventDefault();
    }
  });

You can try it here http://jsfiddle.net/v5E6n/1/.