Need help designing a drag-drop resulting in a formatted output to the user

Hi

I have a request from a customer regarding a drag-drop-edit feature.

This is the idea:

An editor of a website must enter data to show for the web-site user. He has a fixed number of elements that can be used, most of which will be positioned the same place on every page, but a few can vary and some can be added multiple times (this is decided based on the database using relations). The editor would like to be able to have some sort of toolbox feature on his "Create journal", from this toolbox he can drag out elements, such as date, journal number, description, resume etc. When an item is dragged out on the "workspace" he can then enter the data that should go in that field, meaning the description box should be considerebly larger than the date box as example. When the editor has added all the elements to the journal he can save it and it is now visible on the website. The website visitors can now see the journal formatted the way the editor defined it.

I haven't worked alot with AJAX before, so I would like to hear if this is something AJAX can help me solve? If so links to usefull sites would be very welcome

Hi,

Thank you for your post!

Seehttp://forums.asp.net/t/1187961.aspx

Here is a simple demo to combine pictures at server side in C#:

using System;
using System.Collections.Generic;
using System.Collections;
using System.Text;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

namespace Enter_name
{
class GenerateImage
{
public struct favoriteImage
{
private string _imagePath;
private int _x;
private int _y;

public int x
{
get
{
return _x;
}
set
{
_x = value;
}
}

public int y
{
get
{
return _y;
}
set
{
_y = value;
}
}

public string imagePath
{
get
{
return _imagePath;
}
set
{
_imagePath = value;
}
}
}

[STAThread]
static void Main(string[] args)
{
string CurrentDirectory = System.Environment.CurrentDirectory;
string body_path = CurrentDirectory + "\\4.jpg";

favoriteImage[] FaImage = new favoriteImage[2];

FaImage[0].x = -3;
FaImage[0].y = 70;
FaImage[0].imagePath = CurrentDirectory + "\\1.jpg";

FaImage[1].x = 20;//65;
FaImage[1].y = -12;
FaImage[1].imagePath = CurrentDirectory + "\\2.jpg";

generateWinterMark(CurrentDirectory, body_path, FaImage);
}

/// <summary>
///
/// </summary>
/// <param name="savePath"></param>
/// <param name="body_path"></param>
/// <param name="favorite"></param>
/// <returns></returns>
private static string generateWinterMark(string savePath, string body_path, favoriteImage[] favorite)
{
//create a image object containing the photograph to watermark
Bitmap imgPhoto = new Bitmap(body_path);
int phWidth = imgPhoto.Width;
int phHeight = imgPhoto.Height;

string nowTime = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString();
nowTime += DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString();

string saveImagePath = savePath + "\\FA" + nowTime + ".jpg";

//create a Bitmap the Size of the original photograph
Bitmap bmPhoto = new Bitmap(phWidth, phHeight, PixelFormat.Format24bppRgb);
//setResolution
bmPhoto.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);

//load the Bitmap into a Graphics object
Graphics grPhoto = Graphics.FromImage(bmPhoto);
//set the rendering quality for this Graphics object
grPhoto.SmoothingMode = SmoothingMode.AntiAlias;

for (int i = 0; i < favorite.Length; i++)
{
//Draws the photo Image object at original size to the graphics object.
grPhoto.DrawImage(
imgPhoto, // Photo Image object
new Rectangle(0, 0, phWidth, phHeight), // Rectangle structure
0, // x-coordinate of the portion of the source image to draw.
0, // y-coordinate of the portion of the source image to draw.
phWidth, // Width of the portion of the source image to draw.
phHeight, // Height of the portion of the source image to draw.
GraphicsUnit.Pixel); // Units of measure

//------------------
//Step #2 - Insert Property image,For example:hair,skirt,shoes etc.
//------------------
//create a image object containing the watermark
Bitmap imgWatermark = new Bitmap(favorite[i].imagePath);
int wmWidth = imgWatermark.Width;
int wmHeight = imgWatermark.Height;
imgWatermark.MakeTransparent(); //使默认的透明颜色对此 Bitmap 透明。

//Create a Bitmap based on the previously modified photograph Bitmap
Bitmap bmWatermark = new Bitmap(bmPhoto);

//bmWatermark.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);
//Load this Bitmap into a new Graphic Object
Graphics grWatermark = Graphics.FromImage(bmWatermark);

int xPosOfWm = favorite[i].x;
int yPosOfWm = favorite[i].y;

//叠加
grWatermark.DrawImage(imgWatermark, new Rectangle(xPosOfWm, yPosOfWm, wmWidth, wmHeight), //Set the detination Position
0, // x-coordinate of the portion of the source image to draw.
0, // y-coordinate of the portion of the source image to draw.
wmWidth, // Watermark Width
wmHeight, // Watermark Height
GraphicsUnit.Pixel, // Unit of measurment
null); //ImageAttributes Object

//Replace the original photgraphs bitmap with the new Bitmap
imgPhoto = bmWatermark;//age(FromHbitmap(bmWatermark;

grWatermark.Dispose();
imgWatermark.Dispose();
}
bmPhoto.Dispose();
grPhoto.Dispose();

//save new image to file system.
imgPhoto.Save(saveImagePath, ImageFormat.Jpeg);
imgPhoto.Dispose();

return saveImagePath;
}
}
}

The demo show you that conbine 1.png and 2.png towhite.png.

Happy coding!