Image Drag and Drop [Archive]

Rick Maitland

09-07-2003, 10:58 AM

I am using a Drag and Drop javascript for a greeting card program. The java works good when you are creating the card but when you send the card off and view it the images will no longer be in the same place. Is there more code I could add to help this problem??

BestZest

09-07-2003, 03:46 PM

I don't think anyone can help you unless you post some of the drag and drop code with this question, and give some more details as to how you are sending the card.

BestZest

Rick Maitland

09-07-2003, 04:57 PM

Ok the drag and drop code is in this CGI script.

#!/usr/bin/perl
#set the line above this to your perl path. Usually fine as is
# or /usr/local/bin/perl /sbin/perl
# make certain that the first line stays the first line!
##################################################################
# (C)1998-2002 Bignosebird.com cardcgi v2.1
# This software is FREEWARE! Do with it as you wish. It is yours
# to share and enjoy. Modify it, improve it, and have fun with it!
# It is distributed strictly as a learning aid and bignosebird.com
# disclaims all warranties- including but not limited to:
# fitness for a particular purpose, merchantability, loss of
# business, harm to your system, etc... ALWAYS BACK UP YOUR
# SYSTEM BEFORE INSTALLING ANY SCRIPT OR PROGRAM FROM ANY
# SOURCE!

use Socket;

$|=1;

#### PROGRAM CONFIGURATION SECTION ############################
#
# Modify each item below to meet your needs.
#
# DAYS: number of days to keep cards before purging
# SMTP_SERVER: the name of the system acting as your sendmail gateway
# localhost should work on most systems.
# IF NOT- SET THE SEND_MAIL VARIABLE!
# BASEDIR is the unix directory that your greeting cards will
# be stored in.
# BASEURL is the URL (http address) of the directory your cards
# will be stored in.
# SITEURL is the home page URL for your site.
# SITENAME is the Name of your site, ie Title
# EXT is the ending name for your card files. NEVER, EVER USE shtml!!
# PROGNAME is the URL of THIS script.
# MAILLOG is a file name that you can capture e-mail addresses in
# FOR SECURITY REASONS: RENAME THIS FILE!!!!!!!!
# okaydomains are (if specified, the ONLY domains that the script
# can be run from. If left empty, anyone could run your script,
# but they wouldn't see any graphics!!! If your site answers to
# both www.domain.com and domain.com, then use both!
#

@okaydomains=("http://www.airbalancingco.com", "http://www.smokerisefarmpetcemetery.com");
$DAYS=11;

# USE EITHER SMTP OR SEND_MAIL DEPENDING ON YOUR SYSTEM-
# BUT NOT BOTH!

$SMTP_SERVER="localhost";
#$SEND_MAIL="/usr/sbin/sendmail -i -t";

$BASEDIR="/home/.sites/39/site9/web/cards";
$BASEURL="http://www.airbalancingco.com/cards";
$SITEURL="http://www.airbalancingco.com/";
$SITENAME="www.airbalancingco.com";
$EXT=".html";
$PROGNAME="http://www.airbalancingco.com/cgi-bin/card.pl";
$MAILLOG="maillog";
$SUBJECT ="Headstone Order!";

###############################################################

&main_driver;

###############################################################
#
# Now go thru the program looking for the string "BNB SAYS!"
# to locate other changes you should make, such as wording of
# the notification e-mail and "plug" for the site.
#
# to keep things simple, the field names are hard coded in.
# you can of course modify what you wish.
###############################################################

sub thank_you
{
if ($MAILLOG ne "")
{
open (ML,">>$BASEDIR/$MAILLOG");
print ML "$fields{'recip_email'}\n";
print ML "$fields{'sender_email'}\n";
close(ML);
}

print "Content-type: text/html\n\n";
print <<__STOP_OF_THANKS__;

<CENTER>
<H1><B>THANKS!</B></H1>
Your Headstone notification order form has been sent to Smoke Rise Farm Pet Cemetery.<BR>

<P>
<B><A HREF=$fields{'parent'}>RETURN TO HEADSTONE ORDER FORM</A></B>
<P>

__STOP_OF_THANKS__
}

# BNB SAYS!
# THIS IS WHERE YOU CAN CUSTOMIZE YOUR NOTIFICATION LETTER
# DO NOT TOUCH THE TWO LINES WITH __STOP_OF_MESSAGE__ ON
# THEM!!!!

sub setup_letter
{
$msgtext =<<__STOP_OF_MESSAGE__;

You have an order from
$fields{'sender_name'}
To see the order, simply click on the link listed below.

$URL_NAME

The order will remain on the server for about one week, so
please print it out or save it as soon as you can.

__STOP_OF_MESSAGE__
}

# BNB SAYS!
# This is what makes up the body of your card. DO NOT REMOVE OR
# MODIFY THE LINES ABOVE THE WORD $param or the $param line
# itself. Doing so will cause the script to fail.
sub make_body
{
$cardbody =<<__END_OF_CARD_BODY__;
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<style>

</style>
<script language="JavaScript1.2">

</script>

<BGSOUND SRC="$BASEURL/$fields{'midifile'}">
$BODYTAG
$params
<CENTER>
<P>
<TABLE WIDTH=580 BGCOLOR=#ffffff BORDER=5>
<TR>
<TD>
<TABLE WIDTH=580 BGCOLOR=#ffffff>
<TR>
<TD>
<TABLE WIDTH=200 BORDER=4>
<TR>
<TD ALIGN=CENTER VALIGN=CENTER>

<IMG SRC=$BASEURL/$fields{'large_flat'} HEIGHT=432 WIDTH=800 BORDER=0><P>

<select class="drag">
<IMG SRC=$BASEURL/$fields{'flower1'} HEIGHT=103 WIDTH=400 BORDER=0><P>

</TD>
</TR>
</TABLE>

<TD WIDTH=380 VALIGN=TOP >
<CENTER>
<FONT SIZE=+2 COLOR=$fields{'text_color'}
FACE=ARIAL><B>$fields{'the_title'}</B></FONT>
<HR WIDTH=200>
<TABLE WIDTH=355>
<TR>
<TD><FONT FACE=ARIAL COLOR=$fields{'text_color'}>
$fields{'the_message'}

<P ALIGN=CENTER>
<I>$fields{'sig_line'}
</I>
</P>
</FONT>
</TD>
</TR>
</TABLE>
</CENTER>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<P>
<TABLE WIDTH=500>
<TR>
<TD>
<FONT FACE="ARIAL">
This headstone was created by
$fields{'sender_name'}
(<I><A HREF=mailto:$fields{'sender_email'}>
$fields{'sender_email'}</A></I>)
</FONT>
<P>

<CENTER>
<FONT FACE="ARIAL" SIZE="-1"><B>
Card Creator Script by<A HREF="http://bignosebird.com"/>BigNoseBird.com</A>
</B><BR>
<I>Everything for the webmaster, for free!
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
__END_OF_CARD_BODY__
}

sub pass_params
{
$params=<<__END_OF_PARAMS__;
<CENTER>
<TABLE WIDTH=500>
<TR>
<TD>
<FONT FACE="ARIAL">
<B>To send your Headstone, click on the SEND button. To return
to headstone order form, please press your
browser's BACK button.
</B>
<P>
<CENTER>
<FORM METHOD="POST" ACTION="$PROGNAME">
<INPUT TYPE="HIDDEN" NAME="action_code" VALUE="SENDCARD">
<INPUT TYPE="HIDDEN" VALUE="$fields{'large_flat'}" NAME="large_flat">
<INPUT TYPE="HIDDEN" VALUE="$fields{'flower1'}" NAME="flower1">
<INPUT TYPE="HIDDEN" VALUE="$fields{'sender_name'}" NAME="sender_name">
<INPUT TYPE="HIDDEN" VALUE="$fields{'sender_email'}" NAME="sender_email">
<INPUT TYPE="HIDDEN" VALUE="$fields{'recip_name'}" NAME="recip_name">
<INPUT TYPE="HIDDEN" VALUE="$fields{'recip_email'}" NAME="recip_email">
<INPUT TYPE="HIDDEN" VALUE="$fields{'text_color'}" NAME="text_color">
<INPUT TYPE="HIDDEN" VALUE="$fields{'back_color'}" NAME="back_color">
<INPUT TYPE="HIDDEN" VALUE="$fields{'the_title'}" NAME="the_title">
<INPUT TYPE="HIDDEN" VALUE="$fields{'the_message'}" NAME="the_message">
<INPUT TYPE="HIDDEN" VALUE="$fields{'sig_line'}" NAME="sig_line">
<INPUT TYPE="HIDDEN" VALUE="$fields{'midifile'}" NAME="midifile">
<INPUT TYPE="HIDDEN" VALUE="$fields{'background'}" NAME="background">
<INPUT TYPE="HIDDEN" VALUE="$ENV{'HTTP_REFERER'}" NAME="parent">
<INPUT TYPE="submit" VALUE="SEND">
</FORM>
</CENTER>
</TD>
</TR>
</TABLE>
__END_OF_PARAMS__
}

BestZest

09-08-2003, 01:17 PM

phew...! Thats a hell of a code. And the answer is not that simple. First I've made some assuptions:

This script allows people to create the card, plus allows people to view the card, depending on a post or get varible.
'Flower' is the only thing to move in this script (at the moment)
You didn't write much of this script

Post back to tell me if these are correct. As for the answer you'll probably need to put the x and y coordanates of every element into a hidden text field, and change the CGI script to put the elements where they should be when it loads. I'll have to work on this, so just give me some guidence by posting.

BestZest