Prevent image selection and dragging behavior

When writing JavaScript that allows images to be dragged and dropped on a web page, the browser's default drag and selection behavior can get in the way. Here are cross-browser ways to disable these default behaviors...

Prevent selection:
HTML
<img style="moz-user-select: none" unselectable="on" onseletstart="return false;" />

or JavaSript
function preventSelection(element) {
element.style.MozUserSelect = 'none';
element.unselectable = 'on';
element.onselectstart = function() { return false; };
}

Prevent drag for images and links:
HTML
<img onmousedown="return false;" ondragstart="return false;" />

or JavaScript
function preventDrag(element) {
element.onmousedown = function() { return false; };
element.ondragstart = function() { return false; }; //I.E.
}


As an Amazon Associate I earn from qualifying purchases.

My favorite quotations..


“A man should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.”  by Robert A. Heinlein

"We are but habits and memories we chose to carry along." ~ Uki D. Lucas


Popular Recent Articles