Drag drop Image in javascript

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Drag and Drop</title>

<style type=”text/css”>
.dragclass{
position : relative;
position : absolute;
}
</style>

<script type=”text/javascript”>
//Drag and Drop script – http://www.btinternet.com/~kurt.grigg/javascript
var listImage;
var _row=3,_col=4;

if  (document.getElementById)
{
(function()
{
//Stop Opera selecting anything whilst dragging.
if (window.opera){
document.write(“<input type=’hidden’ id=’Q’ value=’ ‘>”);
}

var n = 500;
var dragok = false;
var y,x,d,dy,dx;

function move(e)
{
if (!e) e = window.event;
if (dragok)
{
var _dx= parseInt(d.style.left+0);
var _dy= parseInt(d.style.top+0);

d.style.left = dx + e.clientX – x + “px”;
d.style.top  = dy + e.clientY – y + “px”;
_dx=parseInt(d.style.left+0)-_dx;
_dy= parseInt(d.style.top+0)-_dy;
moveListImange(d.id.toString(),_dx,_dy);
testRoll(_dx,_dy);
return false;
}
}

function down(e)
{
if (!e) e = window.event;
var temp = (typeof e.target != “undefined”)?e.target:e.srcElement;
if (temp.tagName != “HTML”|”BODY” && temp.className != “dragclass”)
{
temp = (typeof temp.parentNode != “undefined”)?temp.parentNode:temp.parentElement;
}
if (temp.className == “dragclass”)
{
if (window.opera)
{
document.getElementById(“Q”).focus();
}
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(temp.style.left+0);
dy = parseInt(temp.style.top+0);
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}

function up()
{
dragok = false;
document.onmousemove = null;
}

document.onmousedown = down;
document.onmouseup = up;

})();
}//End.

function onload()
{
var top=-50,left=-50, length=256;
var i=0,j=0;
listImage=new Array(new Array(_col),new Array(_col),new Array(_col));

for(i=0;i<_row;i++)
for(j=0;j<_col;j++)
{
listImage[i][j]=i.toString()+ j.toString();
}

for(i=0;i<_row;i++)
for(j=0;j<_col;j++)
{
var s=i.toString()+j.toString();
setLocationImage(s,top+length*i,left+length*j);
}

}
function setLocationImage(_id,_top,_left)
{
var item=document.getElementById(_id);
item.style.top=_top + “px”;
item.style.left=_left + “px”;
}
function moveImage(_id,_dx,_dy)
{
var item=document.getElementById(_id);
item.style.top=parseInt(item.style.top+0) + _dy + “px”;
item.style.left=parseInt(item.style.left+0) + _dx  + “px”;
}
function moveListImange(_id,_dx,_dy)
{
var i=0,j=0;
for(i=0;i<_row;i++)
for(j=0;j<_col;j++)
{
var s=i.toString()+j.toString();
if(s!=_id)
moveImage(s,_dx,_dy);
}
}
function testRoll(_dx,_dy)
{
var item;
var min=-28,max=740,size=256;
var i=0,j=0;
var position=0;

if(_dx>0)
{
//lui 1 cot
item=document.getElementById(listImage[0][0].toString());
position=parseInt(item.style.left+0);
if(position >= min)
{

//var x = new Array(listImage[0][_col-1],listImage[1][_col-1],listImage[2][_col-1]);
var x=new Array(_row)
for(i=0;i<_row;i++)
x[i]=listImage[i][_col-1];

for(j=_col-1;j>=0;j–)
for(i=0;i<_row;i++)
{
if(j!=0)
listImage[i][j] = listImage[i][j-1];
else
{
listImage[i][j] = x[i];
document.getElementById(listImage[i][j].toString()).style.left = position – size + “px”;
}
}
}
}
else
{
//tien 1 cot
item=document.getElementById(listImage[_row-1][_col-1].toString());
position=parseInt(item.style.left+0);
if(position <= max – size)
{
//var x = new Array(listImage[0][0],listImage[1][0],listImage[2][0]);
var x=new Array(_row)
for(i=0;i<_row;i++)
x[i]=listImage[i][0];
for(j=0;j<_col;j++)
for(i=0;i<_row;i++)
{
if(j!=_col-1)
listImage[i][j] = listImage[i][j+1];
else
{
listImage[i][j] = x[i];
document.getElementById(listImage[i][j].toString()).style.left = position + size + “px”;
}
}
}
}
if(_dy > 0)
{
//lui 1 hang
item=document.getElementById(listImage[0][0].toString());
position=parseInt(item.style.top+0);
if(position >= min)
{
//var x = new Array(listImage[2][0],listImage[2][1],listImage[2][2]);
var x = new Array(_col);
for(i=0;i<_col;i++)
x[i]=listImage[_row-1][i];
for(i=_row-1;i>=0;i–)
for(j=0;j<_col;j++)
{
if(i!=0)
listImage[i][j] = listImage[i-1][j];
else
{
listImage[i][j] = x[j];
document.getElementById(listImage[i][j].toString()).style.top = position – size + “px”;
}
}
}
}
else
{
//lui 1 hang
item=document.getElementById(listImage[_row-1][_col-1].toString());
position=parseInt(item.style.top+0);
if(position <= max – 2*size)
{
//var x = new Array(listImage[0][0],listImage[0][1],listImage[0][2]);
var x = new Array(_col);
for(i=0;i<_col;i++)
x[i]=listImage[0][i];

for(i=0;i< _row;i++)
for(j=0;j<_col;j++)
{
if(i!=_row-1)
listImage[i][j] = listImage[i+1][j];
else
{
listImage[i][j] = x[j];
document.getElementById(listImage[i][j].toString()).style.top = position + size + “px”;
}
}
}
}
}

function ok()
{
alert(listImage[0][0].toString());
}
</script>
</head>

<body  >
<img id=”00″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”01″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”02″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”03″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”10″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”11″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”12″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”13″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”20″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”21″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”22″ src=”h.JPG” class=”dragclass” alt=”1″ />
<img id=”23″ src=”h.JPG” class=”dragclass” alt=”1″ />
</body>
</html>

Advertisements
By huynhvothinh Posted in Uncategorized Tagged

Overload function method in javascript

function Foo(){}
Foo.prototype.load=function()
{
alert(“ok”);
}

addMethod(Foo.prototype, “load”, function(name){
alert(name);
});

// addMethod – By John Resig (MIT Licensed)
function addMethod(object, name, fn){
var old = object[ name ];
if ( old )
object[ name ] = function(){
if ( fn.length == arguments.length )
return fn.apply( this, arguments );
else if ( typeof old == ‘function’ )
return old.apply( this, arguments );
};
else
object[ name ] = fn;
}

By huynhvothinh Posted in Uncategorized Tagged