...

View Full Version : Targeted Drag and Drop Script modification help.



portraitmaker
01-05-2004, 08:58 PM
I have found some drag and drop code on the web and modified it a little by taking out some of the stuff I didn't need but being new to Javascript I need a little help to figure something out.

This sample allows you to drag an image in a table to another position and swaps the images. Rather than just swap the images I would like to have it insert the image and move the other images down one position. (or up) What would be even better is to have a radio button to specify whether you want to swap or insert the image.

This sample has 16 images but eventually I plan for the IMG SRC to come from a database so there could be many more or even fewer images. It will always have 4 columns but a varying number of rows depending in the number of images.

Any thoughts on how to go about it?

The .zip includes the code and 16 small images

portraitmaker
01-05-2004, 10:21 PM
Here's the code in case anyone doesn't want to download the .zip



<STYLE TYPE="TEXT/CSS">
<!--
.dnd{font:10pt Verdana; font-weight:bold;padding:4pt;background-color:gray;width:120}
.dnd IMG {cursor:move}
}
-->
</STYLE>


<SCRIPT LANGUAGE="JavaScript">
<!--
var DragEl;
var TheTimer;


if(document.all){
document.onmousedown=DragStart;
document.onmouseup=DragEnd;
document.onmousemove=DoDrag;
}

//Generic absolute position retrieval function
function getRealPos(i,which) {
iPos = 0
while (i!=null) {
iPos += i["offset" + which]
i = i.offsetParent
}
return iPos
}

function getFileName(PathStr){
return PathStr.substr(PathStr.lastIndexOf("/")+1)
}

function DragStart(){
clearTimeout(TheTimer);
el=event.srcElement;
if(el.parentElement.className=='dnd'){
DragEl=el;
InitLeft=event.clientX;
InitTop=event.clientY;
floater.style.pixelTop=getRealPos(el,"Top");
InitEltop=floater.style.pixelTop;
floater.style.pixelLeft=getRealPos(el,"Left");
InitElleft=floater.style.pixelLeft;
floater.children[0].src=el.src;
el.src='images/trans.jpg';
floater.style.visibility='visible';
}
}

function DragEnd(){
var i;

if(!DragEl) return;

//Get co-ordinates
X1=floater.style.pixelLeft;
Y1=floater.style.pixelTop;
MaxArea=0;
TargetElem=null;

//Cycle through prospective targets
Targets=document.all;
for(i=0;i<Targets.length;i++)
if(Targets[i].className=="dnd"){
X2=getRealPos(Targets[i].children[0],"Left");
Y2=getRealPos(Targets[i].children[0],"Top");
hOverlap=floater.offsetWidth-Math.abs(X2-X1);
vOverlap=floater.offsetHeight-Math.abs(Y2-Y1);
//alert(hOverlap+";"+vOverlap)
areaOverlap=((hOverlap>0)&&(vOverlap>0))?hOverlap*vOverlap:0;
if(areaOverlap>MaxArea){
MaxArea=areaOverlap;
TargetElem=Targets[i];
}
}


floater.style.visibility='hidden';

if(TargetElem){
//Swap Images
DragEl.src=TargetElem.children[0].src;
TargetElem.children[0].src=floater.children[0].src;
}
else{
DragEl.src=floater.children[0].src;
return;
}


}

function DoDrag(){
if(DragEl){
floater.style.pixelLeft=event.clientX+InitElleft-InitLeft;
floater.style.pixelTop=event.clientY+InitEltop-InitTop;
return false;
}
}

//-->
</SCRIPT>




<!--********************** Start of demo *******************-->
<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=0 BORDER=0>
<TR>
<TD>


<DIV ID="POS1" class="dnd">
<IMG SRC="images/1.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/2.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>


<TD>
<DIV class="dnd">
<IMG SRC="images/3.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/4.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

</TR>
<TR>

<TD>
<DIV class="dnd">
<IMG SRC="images/5.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/6.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/7.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/8.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

</TR>
<TR>

<TD>
<DIV class="dnd">
<IMG SRC="images/9.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/10.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/11.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/12.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>


</TR>
<TR>

<TD>
<DIV class="dnd">
<IMG SRC="images/13.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/14.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/15.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>

<TD>
<DIV class="dnd">
<IMG SRC="images/16.jpg" BORDER=0 ALIGN="CENTER">
</DIV>
</TD>




<DIV ID="floater" style="visibility:hidden;position:absolute">
<IMG SRC="images/trans.jpg" BORDER=0 ALIGN="CENTER">
</DIV>


</TR>
</TABLE>
<!--******************** End of Demo *******************-->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum