Images as draggable input elements?

Input Elements emb开发者_开发技巧edded in Images

Within a Web Browser I want

• to allow images to have an input element embedded within them.

• to allow those images to be dragged around within a container

• to make those images sufficiently self-aware that when close to each other they 'snapped' together

Examples : Screen Dump/Video

There's a screen dump here which illustrates the type of thing I'd like : http://imgur.com/WMDC8 .

To illustrate it better there's a video here (turn your sound on) : http://www.screencast.com/t/4BaLMzHK .

Can we do this ?

What are ways you could "wrap" an image around a input element in HTML/JS ?

(I would prefer not to use: Flash; Java or Silverlight but I'm open to that if that's the only way it can be done).

OK - this isn't going to be a complete, end-to-end answer, but it should give you the building blocks.

For starters, you won't need flash, or any other third party stuff. HTML, CSS and Javascript will do everything you need.

OK, let's look at the 'images with embedded inputs' requirement. What you're describing is really just a particular visual style for an element surrounding a form input. HTML has a specific element for this - the <fieldset>. Fieldsets are block elements, and can be given a background image (that sets the image you want), width, height, etc.

I'd use something like this:

<fieldset class="formModule moduleTypeA">
   <label for="controlTime">Wait</label>
   <input type="text" id="controlTime" name="controlTime" value="5"/>
   <label for="controlTime">seconds</label>
</fieldset>

Each one of those fieldsets will become a draggable 'module'. The styling should be simple enough - something like:

fieldset.formModule {
   display:block; /* Not sure if this is strictly required - fieldsets have some funny default styles in some browsers, so I'm just playing it safe */
   width: 200px;
   height: 180px;
   padding: 10px;
   background: transparent url(formModule.png) no-repeat center center;
}

Using an additional class will allow you to vary the types of modules you use:

.moduleTypeA {
   width:250px;
   height:120px;
   background-image: url(formModuleA.png);
}

.moduleTypeB {
   width:160px;
   height:200px;
   background-image: url(formModuleB.png);
}

Personally, I would try to do it without images - using standard background colors, plus CSS3 border-radius, shadows and gradient effects would allow you to get a very nice 'puzzle piece' type of visual style in capable browsers, and be much faster and easier to maintain, since you wouldn't need to re-create images when you want to re-size a module. You might need to add a little 'marker' element (just a <span class="jigsawMale"> or <span class="jigsawFemale">) to mark the 'snap' points.

Right - so that's your HTML and CSS mostly done. Next, you need dragging and snapping. I'd go for jQueryUI here. It's the least painful to set up, and should work in a good variety of browsers.

Check this demo out: http://jqueryui.com/demos/draggable/#snap-to

So, your checklist will be (in order)

1. Get your HTML for your forms working
2. Build up your CSS to get your visuals looking right (not worrying about images yet)
3. Install jQuery and jQuery UI and confirm they're working
4. Apply the draggable and snappable behaviour to your form modules
5. Test everything
6. Tweak your visual styles to make it beautiful!

I hope that helps! It's a fairly complex piece of UI you're trying to build here - hopefully this breaks it down into manageable chunks. Good luck!