Targeted Drag and Drop code modification help.

**McKirahan** · Jul 20 '05, 01:10 PM

Re: Targeted Drag and Drop code modification help.

"portraitma ker" <portraitmaker. zb84m@mail.foru m4designers.com > wrote in
message news:portraitma ker.zb84m@mail. forum4designers .com...[color=blue]
>
> I 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.
>
> 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.
>
> Being new to Javascript I'm not quite sure how to go about it.
>
> The .zip includes the code and 16 small images
>
>
> +----------------------------------------------------------------+
> | Attachment filename: drag.zip |
> |Download attachment:[/color]
http://www.forum4desig ners.com/attachment.php? postid=95262|[color=blue]
> +----------------------------------------------------------------+
>
> portraitmaker
> ------------------------------------------------------------------------
> Posted via http://www.forum4designers.com
> ------------------------------------------------------------------------
> View this thread: http://www.forum4designers.com/message27114.html
>[/color]

Below is the HTML source for a JigSaw puzzle from
Wrox's Instant IE4 Dynamic HTML Reference (0685).

It used to be on their site at:

404 Not Found

http://rapid.wrox.co.uk/books/0685/

It works with 96 images (24 square basic images at every rotation) in a 6x4
table.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD><TITLE>Th e Jigsaw Example</TITLE></HEAD>

<BODY>

<H3> Move pieces by clicking and dragging. Double-click on a piece to rotate
it.</H3>

<IMG ID="Grid" SRC="jig1.gif" STYLE="position :absolute; top=50; left=310;
width=356; height=237">
<IMG ID="P1" SRC="gogh11.gif " STYLE="position :absolute; top=50; left=20;
width=59; height=59">
<IMG ID="P2" SRC="gogh22.gif " STYLE="position :absolute; top=120; left=20;
width=59; height=59">
<IMG ID="P3" SRC="gogh33.gif " STYLE="position :absolute; top=190; left=20;
width=59; height=59">
<IMG ID="P4" SRC="gogh41.gif " STYLE="position :absolute; top=260; left=20;
width=59; height=59">
<IMG ID="P5" SRC="gogh54.gif " STYLE="position :absolute; top=330; left=20;
width=59; height=59">
<IMG ID="P6" SRC="gogh61.gif " STYLE="position :absolute; top=400; left=20;
width=59; height=59">
<IMG ID="P7" SRC="gogh72.gif " STYLE="position :absolute; top=50; left=90;
width=59; height=59">
<IMG ID="P8" SRC="gogh83.gif " STYLE="position :absolute; top=120; left=90;
width=59; height=59">
<IMG ID="P9" SRC="gogh91.gif " STYLE="position :absolute; top=190; left=90;
width=59; height=59">
<IMG ID="P10" SRC="gogh103.gi f" STYLE="position :absolute; top=260; left=90;
width=59; height=59">
<IMG ID="P11" SRC="gogh113.gi f" STYLE="position :absolute; top=330; left=90;
width=59; height=59">
<IMG ID="P12" SRC="gogh121.gi f" STYLE="position :absolute; top=400; left=90;
width=59; height=59">
<IMG ID="P13" SRC="gogh133.gi f" STYLE="position :absolute; top=50; left=160;
width=59; height=59">
<IMG ID="P14" SRC="gogh141.gi f" STYLE="position :absolute; top=120; left=160;
width=59; height=59">
<IMG ID="P15" SRC="gogh154.gi f" STYLE="position :absolute; top=190; left=160;
width=59; height=59">
<IMG ID="P16" SRC="gogh163.gi f" STYLE="position :absolute; top=260; left=160;
width=59; height=59">
<IMG ID="P17" SRC="gogh172.gi f" STYLE="position :absolute; top=330; left=160;
width=59; height=59">
<IMG ID="P18" SRC="gogh182.gi f" STYLE="position :absolute; top=400; left=160;
width=59; height=59">
<IMG ID="P19" SRC="gogh193.gi f" STYLE="position :absolute; top=50; left=230;
width=59; height=59">
<IMG ID="P20" SRC="gogh204.gi f" STYLE="position :absolute; top=120; left=230;
width=59; height=59">
<IMG ID="P21" SRC="gogh212.gi f" STYLE="position :absolute; top=190; left=230;
width=59; height=59">
<IMG ID="P22" SRC="gogh223.gi f" STYLE="position :absolute; top=260; left=230;
width=59; height=59">
<IMG ID="P23" SRC="gogh233.gi f" STYLE="position :absolute; top=330; left=230;
width=59; height=59">
<IMG ID="P24" SRC="gogh241.gi f" STYLE="position :absolute; top=400; left=230;
width=59; height=59">

</BODY>

<SCRIPT LANGUAGE=JavaSc ript>

var strImgDragging = null; // the global 'piece being moved' variable

function mouseDownEvent( ) // set the jigsaw piece to be moved
{
strID = event.srcElemen t.id;
if (strID.indexOf( "P") != -1) // if this is a jigsaw piece
{
strImgDragging = strID // save the ID in a global variable
// bring the piece to the top of the z-order
document.all[strImgDragging].style.zIndex = 1
window.status = "Drag this piece onto the grid and release the mouse to
position it ..."
}
else
strImgDragging = null; // set global variable to null
}

function mouseMoveEvent( ) // move the jigsaw piece
{
if (strImgDragging != null)
{
// move the image to the new position
// assume the mouse pointer is in middle of image
document.all[strImgDragging].style.pixelLef t = event.x - 30;
document.all[strImgDragging].style.pixelTop = event.y - 30;
}

// prevent event being handled elsewhere and the default action
event.cancelBub ble = true;
event.returnVal ue = false;
}

function mouseUpEvent() // place the jigsaw piece on the grid
{
if (strImgDragging != null)
{
// stop dragging, and position the piece in line with grid.
posLeft = Math.floor((doc ument.all[strImgDragging].style.pixelLef t -
280) / 59);
posTop = Math.floor((doc ument.all[strImgDragging].style.pixelTop - 20) /
59);
if (posLeft >= 0 && posTop >= 0)
{
document.all[strImgDragging].style.pixelLef t = (posLeft * 59) + 311;
document.all[strImgDragging].style.pixelTop = (posTop * 59) + 51;
}

// return the piece to the lower z-order position
document.all[strImgDragging].style.zIndex = 0;

// reset the global 'dragging' variable
strImgDragging = null;
window.status = "Click on a jigsaw piece and drag it onto the grid ..."

// prevent event being handled elsewhere and the default action
event.cancelBub ble = true;
event.returnVal ue = false;
}
}

function dblClickEvent() // rotate the jigsaw piece
{
objImage = event.srcElemen t; // get a reference to the image
strImageID = objImage.id; // get the ID of the image

// if it's a jigsaw piece then rotate it
if (strImageID.ind exOf("P") != -1)
{
strSrc=objImage .src // get the image file name

// extract just the image number as a string
intStart = strSrc.indexOf( "\gogh");
if (intStart != -1)
strSrc = strSrc.substrin g(intStart + 4);
intEnd = strSrc.indexOf( ".");
if (intEnd != -1)
strSrc = strSrc.substrin g(0, intEnd);

//split into image and attitude numbers
strImgNum = strSrc.substrin g(0, strSrc.length -1);
strAttNum = strSrc.substrin g(strSrc.length - 1, strSrc.length);

// calculate the new image attitude number
intAttNum = strAttNum.value Of();
intAttNum ++;
if (intAttNum > 4) intAttNum = 1;
strAttNum = intAttNum.toStr ing();

// create and assign the new image name
objImage.src = "gogh" + strImgNum + strAttNum + ".gif";

}
// prevent event being handled elsewhere and the default action
event.cancelBub ble = true;
event.returnVal ue = false;
}

document.ondblc lick=dblClickEv ent;
document.onmous edown=mouseDown Event;
document.onmous emove=mouseMove Event;
document.onmous eup=mouseUpEven t;
</SCRIPT>
</HTML>

Targeted Drag and Drop code modification help.

Targeted Drag and Drop code modification help.

Comment