PDA

View Full Version : cut copy paste



mido911
12-25-2010, 09:24 AM
hi how can I copy and paste an image anywhere on page in javascript I am thinking of using cloneNode to copy and appendChild to paste but am confused I have done that but it seems to paste over the parent image.

vwphillips
12-25-2010, 12:56 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (04-August-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// To Drag and drop an element.
// The drag may be executed from the draggable object or a nested element(drag panel)
// Minimum and maximum drag limits may be specified for both 'X' and 'Y' coordinates.
// Specified functions may be called on mousedown, move or mouse up of the object.
//
// There may be as many applications as required on a page.

// ****** Application Notes

// ***** The HTML and CSS Code
//
// The drag objects position must assigned as 'relative' or absolute'
// and the 'left', top' and 'z-Index' assigned by the drag objects style class or inline style.
// Options allow the use of 'right' and 'bottom' in place of 'left' and top' respectively.

// ***** Initialising the Script
//
// The script would normally initialised by a BODY or window event call assign the instance of the script to a variable.
// e.g.
// var oop=new zxcDrag(document.getElementById('tst'),false,'xy',[0,300,0,250])
// where:
// parameter 1 = the object to activate drag on mousedown. (object)
// parameter 2 = (optional) the object to dragged on mousemove. (object, default to parameter 1 object)
// parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y. (string, default 'xy')
// the default style positions are 'left' and 'top'
// to use 'right' include 'r', to use 'bottom' include 'b'.
// parameter 4 = (optional) an array defining the minimum and maximum x and y coordinates (array, default [])
// where:
// field 0 = the minimum x cordinate. (digits, null = not set)
// field 1 = the maximum x cordinate. (digits, null = not set)
// field 2 = the minimum y cordinate. (digits, null = not set)
// field 3 = the maximum y cordinate. (digits, null = not set)
// parameter 4 = (optional) a function name to be called on mouseup(see Note 2). (function object)
// parameter 5 = (optional) a function name to be called on mousemove(see Note 2). (function object)
// parameter 6 = (optional) a function name to be called on mousedown(see Note 2). (function object)

// Note 1:
// On mousedown of the object the object z_index is increased by 10.
// On the mouseup the z-Index is restored to the original z-Index.

// Note 2:
// When a function is called the zxcDrag function is passed to the function.
// The drag object may be access by argument[0].dobj, and the event as argument[1].
// e.g.
// function Test(obj,evt){
// alert(obj.dobj);
// alert(evt.type);
// }


// Functional Code Size 2.37K

// ****** Functional Code - NO NEED to Change

function zxcDrag(obj,root,dxy,mm,uf,mf,df){
this.dobj=root?root:obj;
mm=mm||['x','x','y','y'];
dxy=(dxy||'xy').toLowerCase();
this.dx=dxy.indexOf('x')>-1?true:false;
this.dy=dxy.indexOf('y')>-1?true:false;
this.xmde=dxy.indexOf('r')<0?'left':'right';
this.ymde=dxy.indexOf('b')<0?'top':'bottom';
this.mm=[typeof mm[0]=='number'?mm[0]:-100000,typeof mm[1]=='number'?mm[1]:100000,typeof mm[2]=='number'?mm[2]:-100000,typeof mm[3]=='number'?mm[3]:100000];
this.df=df||false; this.mf=mf||false; this.uf=uf||false;
this.addevt(obj||root,'mousedown','down');
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
return this;
}

zxcDrag.prototype.down=function(ev){
if (!this.drag){
document.onselectstart=function(event){ window.event.returnValue=false; };
this.lastXY=[ev.clientX,ev.clientY];
this.drag=true;
this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
this.pos=[zxcLTZ(this.dobj,this.xmde),zxcLTZ(this.dobj,this.ymde)];
if (this.df) this.df(this,ev);
}
if (ev.target) ev.preventDefault();
return false;
}

zxcDrag.prototype.move=function(ev){
if (this.drag){
var mse=[ev.clientX,ev.clientY];
this.pos=[Math.min(Math.max(this.mm[0],this.pos[0]+(mse[0]-this.lastXY[0])*(this.xmde=='left'?1:-1)),this.mm[1]),Math.min(Math.max(this.mm[2],this.pos[1]+(mse[1]-this.lastXY[1])*(this.ymde=='top'?1:-1)),this.mm[3])];
if (this.dx) this.dobj.style[this.xmde]=this.pos[0]+'px';
if (this.dy) this.dobj.style[this.ymde]=this.pos[1]+'px';
this.lastXY=mse;
if (this.mf) this.mf(this,ev);
}
if (ev.target) ev.preventDefault();
return false;
}

zxcDrag.prototype.up=function(ev){
if (this.drag){
this.drag=false;
this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')-10+'';
if (this.uf) this.uf(this,ev);
document.onselectstart=null;
}
}

zxcDrag.prototype.addevt=function(o,t,f){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e); };
else o['on'+t]=o[f];
}
}

function zxcLTZ(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')],10);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}

/*]]>*/
</script>


</head>
<body>
<img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Img" />
<img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Img" />

<script type="text/javascript">
/*<![CDATA[*/

function PlaceImage(cls){
var imgs=this.bycls(cls);
this.img=[];
for (var img,z0=0;z0<imgs.length;z0++){
img=imgs[z0].cloneNode(false);
img.style.position='absolute';
img.style.visibility='hidden';
img.style.zIndex='101';
img.style.cursor='move';
img.style.top='0px';
document.body.appendChild(img);
this.img[z0]=[imgs[z0],new zxcDrag(img,img)];
this.addevt(imgs[z0],'mouseup','mseup',z0);
}
}

PlaceImage.prototype={

mseup:function(nu,e){
var img=this.img[nu][0],dimg=this.img[nu][1].dobj,pos=this.pos(this.img[nu][0]);
dimg.style.left=pos[0]+'px'
dimg.style.top=pos[1]+'px'
dimg.style.visibility='visible';
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

bycls:function(nme){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('IMG'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}



}

new PlaceImage('drag');

/*]]>*/
</script>



</body>

</html>

mido911
12-25-2010, 06:08 PM
didn't achieve the functionality of copy upon clicking cntrl+c and paste upon clicking cntrl+v

vwphillips
12-25-2010, 11:18 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<img class="img" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Img" />

<script type="text/javascript">
/*<![CDATA[*/

function zxcKeyPress(cls){
var imgs=this.bycls(cls);
for (var z0=0;z0<imgs.length;z0++){
this.addevt(imgs[z0],'mouseover','mouse',imgs[z0]);
this.addevt(imgs[z0],'mouseout','mouse',false);
}
this.img=false;
this.lstimg=false;
this.clone=false;
this.addevt(document,'keydown','keydown');
this.addevt(document,'mousemove','mousepos');
}

zxcKeyPress.prototype={

mouse:function(e,img){
this.img=img;
},

keydown:function(e){
var key=e.which?e.which:e.keyCode;
if (this.img&&key==67&&e.ctrlKey){
this.clone=this.img.cloneNode(false);
this.clone.style.position='absolute';
this.lstimg=this.img;
}
else if (this.lstimg&&this.clone&&key==86&&e.ctrlKey){
this.clone.style.left=this.msepos[0]-this.lstimg.width/2+'px';
this.clone.style.top=this.msepos[1]-this.lstimg.height/2+'px';
document.body.appendChild(this.clone);
this.clone=false;
}
},

mousepos:function(e){
this.msepos=this.mse(e);
},

mse:function(e){
if (document.all) return [e.clientX+this.docs()[0],e.clientY+this.docs()[1]];
return [e.pageX,e.pageY];
},

docs:function(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
},

bycls:function(nme){
for (reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('IMG'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

}

if (!document.all){ document.captureEvents(Event.KEYDOWN); }

new zxcKeyPress('img');
//document.onkeydown=zxcKeyPress
/*]]>*/
</script>

</body>

</html>