Click here to Skip to main content
14,606,015 members

Cross-browser drag and drop

Rate this:
4.63 (11 votes)
Please Sign up or sign in to vote.
4.63 (11 votes)
21 Apr 2012CPOL
This article explains how to make drag and drop work across multiple browsers.


I could not find a good Drag and Drop JavaScript example that would work in all browsers (including iPad). So I wrote one myself. I hope someone might find it useful. Please note that this example shows how to “capture” the element so that you don’t lose it if you move outside of the element or outside of the browser window.

Unfortunately, I could not find a good way how not to lose capture over an iFrame in Chrome and Safari. The best approach I found is to cover all iFrames with DIVs while the dragging is taking place. Any suggestions on how to do this better are welcome.

This article is for those that like nuts and bolts and are not using third party libraries like jQuery. There is nothing wrong with using third party libraries – I just like more flexibility. For example, you can use this example to resize elements.

Image 1

Using the code

To use this script, use the MakeDragable JavaScript function. It accepts only one parameter: the ID of the element you want users to drag. Here is the full JavaScript code:

var oDragItem = null;
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){

function MakeDragable(id){
	var oBox = $(id);
	oBox.className = "Dragable";
	if (navigator.platform=="iPad"){
		oBox.ontouchstart= function(e){TouchStart(e)};
		oBox.onmousemove= function(e){DragMove(oBox,e)};
		oBox.onmousedown=function(e){DragStart(oBox,e);return false};	

function TouchStart(e){
	var oPos = GetObjPos(;
	iClickOffsetX = e.targetTouches[0].pageX - oPos.x;
	iClickOffsetY = e.targetTouches[0].pageY - oPos.y;

function DragStart(o,e){
	if(!e) var e = window.event;
	oDragItem = o;
	if (e.offsetX){
		iClickOffsetX = e.offsetX;
		iClickOffsetY = e.offsetY;	
		var oPos = GetObjPos(o);
		iClickOffsetX = e.clientX - oPos.x;
		iClickOffsetY = e.clientY - oPos.y;
	if (o.setCapture){
		window.addEventListener ("mousemove", DragMove2, true);
		window.addEventListener ("mouseup",   DragStop2, true);

function DragMove2(e){

function DragStop2(e){

function DragMove(o,e){
	if (oDragItem==null) return;

	if(!e) var e = window.event;
	var x = e.clientX + document.body.scrollLeft - document.body.clientLeft - iClickOffsetX;
	var y = e.clientY + document.body.scrollTop  - document.body.clientTop - iClickOffsetY;
		zIndex = 1000;

function TouchMove(e){
    var curX = e.targetTouches[0].pageX - iClickOffsetX;
    var curY = e.targetTouches[0].pageY - iClickOffsetY; 
    var o = e.targetTouches[0].target; = "absolute";  = curY + 'px'; = curX + 'px'; 

function DragStop(o,e){
	if (oDragItem==null) return;

	if (o.releaseCapture){
	}else if (oDragItem){
		window.removeEventListener ("mousemove", DragMove2, true);
		window.removeEventListener ("mouseup",   DragStop2, true);
	} = 1;
	oDragItem = null;

function $(s){
	return document.getElementById(s);

function GetObjPos(obj){
	var x = 0;
	var y = 0;
	var w = obj.offsetWidth;
	var h = obj.offsetHeight;
	if (obj.offsetParent) {
		x = obj.offsetLeft
		y = obj.offsetTop
		while (obj = obj.offsetParent){
			x += obj.offsetLeft;
			y += obj.offsetTop;
	return {x:x, y:y, w:w, h:h};

I created a single CSS class to make drag-able elements not selectable and to have the cursor suggest that the element is drag-able.

   -moz-user-select: -moz-none;   
   -khtml-user-select: none;   
   -webkit-user-select: none;   
   -o-user-select: none;   
   user-select: none;

Points of Interest

I also wrote a related article called: JavaScript example of drag and drop to a target


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Igor Krupitsky
Web Developer
United States United States
Igor is a business intelligence consultant working in Tampa, Florida. He has a BS in Finance from University of South Carolina and Masters in Information Management System from University of South Florida. He also has following professional certifications: MCSD, MCDBA, MCAD.

Comments and Discussions

QuestionDrag & Drop of an audio file Pin
Member 109960636-Aug-14 7:29
MemberMember 109960636-Aug-14 7:29 
QuestionAndroid Pin
werd6-Jul-12 5:42
Memberwerd6-Jul-12 5:42 
GeneralMy vote of 5 Pin
Ivan Stefanov18-Jul-11 22:17
MemberIvan Stefanov18-Jul-11 22:17 
GeneralRe: My vote of 5 Pin
secorbett21-Jul-11 2:16
Membersecorbett21-Jul-11 2:16 
GeneralRe: My vote of 5 Pin
Igor Krupitsky16-Aug-11 13:22
mvaIgor Krupitsky16-Aug-11 13:22 

I did not say there were not good cross-browser implementations. I just could not find them. If you can find them please provide links.

GeneralMy vote of 3 Pin
secorbett18-Jul-11 9:12
Membersecorbett18-Jul-11 9:12 
SuggestionGood Attempt - but why not jQuery? Pin
rManiks15-Jul-11 4:05
MemberrManiks15-Jul-11 4:05 
GeneralRe: Good Attempt - but why not jQuery? Pin
secorbett18-Jul-11 9:12
Membersecorbett18-Jul-11 9:12 
GeneralRe: Good Attempt - but why not jQuery? Pin
Dewey20-Jul-11 22:52
MemberDewey20-Jul-11 22:52 
GeneralRe: Good Attempt - but why not jQuery? Pin
secorbett21-Jul-11 2:14
Membersecorbett21-Jul-11 2:14 
GeneralRe: Good Attempt - but why not jQuery? Pin
Dewey20-Jul-11 22:50
MemberDewey20-Jul-11 22:50 
GeneralRe: Good Attempt - but why not jQuery? Pin
HaBiX24-Jul-11 23:11
MemberHaBiX24-Jul-11 23:11 
GeneralRe: Good Attempt - but why not jQuery? Pin
JesperMadsen1233-Sep-14 7:47
MemberJesperMadsen1233-Sep-14 7:47 
GeneralRe: Good Attempt - but why not jQuery? Pin
werd6-Jul-12 5:20
Memberwerd6-Jul-12 5:20 
GeneralRe: Good Attempt - but why not jQuery? Pin
werd6-Jul-12 5:25
Memberwerd6-Jul-12 5:25 
GeneralRe: Good Attempt - but why not jQuery? Pin
Dennis Baberich12-Aug-14 9:32
professionalDennis Baberich12-Aug-14 9:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 14 Jul 2011

Tagged as


23 bookmarked