Drag and Drop by className

Michael Burt Sep 8, 2006

Assign a specified class to a div tag and you will be able to drag and drop it. Very useful and easy to implement.

Drag number ONE

Drag number TWO

The JavaScript Source: Miscellaneous : Drag and Drop by className

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

.drag {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 1px solid black;
  background: silver
}

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Michael Burt :: http://mburt.funpic.org */

var ie = document.all
var ns = document.getElementById && !ie

function dragbyclass(e) {
  var fobj = ns ? e.target : event.srcElement
  if (fobj.tagName=="DIV" && fobj.className=="drag") {
   	var ev=e||event
   	var offsetx=ev.clientX-fobj.offsetLeft
   	var offsety=ev.clientY-fobj.offsetTop
  		document.onmousemove=function() {
    		fobj.style.left=ev.clientX-offsetx
    		fobj.style.top=ev.clientY-offsety
    		return false
  		}
  		fobj.onmouseup=function() {
   	 	document.onmousemove=null
   		}
  }
}

document.onmousedown=dragbyclass

<div class="drag" style="left:40px;top:60px;z-index:100">Drag number ONE</div>
<div class="drag" style="left:40px;top:60px">Drag number TWO</div>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Drag and Drop by className

Leave a Response

Attention JavaScript Coders

Go Deeper