"portraitmaker" <po*****************@mail.forum4designers.com> wrote in
message news:po*****************@mail.forum4designers.com. ..
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:
http://www.forum4designers.com/attachment.php?postid=95262| +----------------------------------------------------------------+
portraitmaker
------------------------------------------------------------------------
Posted via http://www.forum4designers.com
------------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message27114.html
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:
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>The 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.gif" STYLE="position:absolute; top=260; left=90;
width=59; height=59">
<IMG ID="P11" SRC="gogh113.gif" STYLE="position:absolute; top=330; left=90;
width=59; height=59">
<IMG ID="P12" SRC="gogh121.gif" STYLE="position:absolute; top=400; left=90;
width=59; height=59">
<IMG ID="P13" SRC="gogh133.gif" STYLE="position:absolute; top=50; left=160;
width=59; height=59">
<IMG ID="P14" SRC="gogh141.gif" STYLE="position:absolute; top=120; left=160;
width=59; height=59">
<IMG ID="P15" SRC="gogh154.gif" STYLE="position:absolute; top=190; left=160;
width=59; height=59">
<IMG ID="P16" SRC="gogh163.gif" STYLE="position:absolute; top=260; left=160;
width=59; height=59">
<IMG ID="P17" SRC="gogh172.gif" STYLE="position:absolute; top=330; left=160;
width=59; height=59">
<IMG ID="P18" SRC="gogh182.gif" STYLE="position:absolute; top=400; left=160;
width=59; height=59">
<IMG ID="P19" SRC="gogh193.gif" STYLE="position:absolute; top=50; left=230;
width=59; height=59">
<IMG ID="P20" SRC="gogh204.gif" STYLE="position:absolute; top=120; left=230;
width=59; height=59">
<IMG ID="P21" SRC="gogh212.gif" STYLE="position:absolute; top=190; left=230;
width=59; height=59">
<IMG ID="P22" SRC="gogh223.gif" STYLE="position:absolute; top=260; left=230;
width=59; height=59">
<IMG ID="P23" SRC="gogh233.gif" STYLE="position:absolute; top=330; left=230;
width=59; height=59">
<IMG ID="P24" SRC="gogh241.gif" STYLE="position:absolute; top=400; left=230;
width=59; height=59">
</BODY>
<SCRIPT LANGUAGE=JavaScript>
var strImgDragging = null; // the global 'piece being moved' variable
function mouseDownEvent() // set the jigsaw piece to be moved
{
strID = event.srcElement.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.pixelLeft = event.x - 30;
document.all[strImgDragging].style.pixelTop = event.y - 30;
}
// prevent event being handled elsewhere and the default action
event.cancelBubble = true;
event.returnValue = 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((document.all[strImgDragging].style.pixelLeft -
280) / 59);
posTop = Math.floor((document.all[strImgDragging].style.pixelTop - 20) /
59);
if (posLeft >= 0 && posTop >= 0)
{
document.all[strImgDragging].style.pixelLeft = (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.cancelBubble = true;
event.returnValue = false;
}
}
function dblClickEvent() // rotate the jigsaw piece
{
objImage = event.srcElement; // 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.indexOf("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.substring(intStart + 4);
intEnd = strSrc.indexOf(".");
if (intEnd != -1)
strSrc = strSrc.substring(0, intEnd);
//split into image and attitude numbers
strImgNum = strSrc.substring(0, strSrc.length -1);
strAttNum = strSrc.substring(strSrc.length - 1, strSrc.length);
// calculate the new image attitude number
intAttNum = strAttNum.valueOf();
intAttNum ++;
if (intAttNum > 4) intAttNum = 1;
strAttNum = intAttNum.toString();
// create and assign the new image name
objImage.src = "gogh" + strImgNum + strAttNum + ".gif";
}
// prevent event being handled elsewhere and the default action
event.cancelBubble = true;
event.returnValue = false;
}
document.ondblclick=dblClickEvent;
document.onmousedown=mouseDownEvent;
document.onmousemove=mouseMoveEvent;
document.onmouseup=mouseUpEvent;
</SCRIPT>
</HTML>
