drag and drop in javascript

Use the below code and have the drag and drop in javascript
Html Code

<div id='containerspan' style='left:30%;position:absolute;width:500px;height:500px;border:1px solid red;background: gray;'>
    <pre id='c1' style='position:absolute;width:50px;height:50px;z-index:500px;background: red;cursor: move;'>Drag Me</pre>
</div>

Javascript Code
 

<script>
var is_started=2,current_id,interval2,current_width_is,current_height_is;
function initDragOptions(parentContainer,id){
document.getElementById(id).setAttribute('draggable',true)
document.getElementById(id).setAttribute('onmousedown','drag1(event,this.id)')
document.getElementById(parentContainer).setAttribute('onmouseup','drag2(this.id)')
    current_width_is=parseFloat(document.getElementById(parentContainer).style.width)-parseFloat(document.getElementById(id).style.width)
    current_height_is=parseFloat(document.getElementById(parentContainer).style.height)-parseFloat(document.getElementById(id).style.height)
}
function drag1(e,id) {
    is_started=1;current_id=id;interval2=setInterval("setsoffset(""+id+"")",10)}
function drag2(id) {is_started=2;current_id=id;interval2=clearInterval(interval2)}
function setsoffset(id) {
    if (is_started==1)
    {
    document.getElementById(id).onmousemove = function(e)
    {
        if (is_started==1)
        {
        var IE = document.all?true:false;
        if (IE)
        {tt=event.clientY;ll=event.clientX;}
        else
        {tt= e.pageY;ll= e.pageX;}
	tt=parseFloat(tt)-40
	ll=parseFloat(ll)-430
        if (tt>current_height_is || tt<-12)
        return false
	if (ll<1 || ll>current_width_is)
        return false
        document.getElementById(current_id).style.top=tt+'px'
	document.getElementById(current_id).style.left=ll+'px'
        }
    }
    }
    else
    interval2=clearInterval(interval2)
}
initDragOptions("containerspan","c1")
</script>