Question

I’m looking to simplify the process of creating html emails, making it simple to drag and drop different elements to compile the final product.

I’ve created a series of html content blocks (1 column story, 2 column story, ad block etc), and would like to create something that will allow the user to:

1. Drag html content block elements to the stage as needed, and sort these at any point
2. Edit the text and image areas in each content block
3. Allow me to export the final compiled html – ready for a 3rd party email management app

I’ve taken a look at jQuery sortable & draggable, but know these are only a small part of the picture. I was wondering if anyone had created something similar, or would be able to point me in the right direction in order to accomplish this?

Answer 1

try Jquery Templates, it offers you more flexibility Jquery Template

from Jquery Examples.

<script id="movieTemplate" type="text/x-jquery-tmpl">  //this is template 
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<ul id="movieList"></ul>

<script>
var movies = [  // data for the template 
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
];

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */

$( "#movieTemplate" ).tmpl( movies )  
    .appendTo( "#movieList" );
</script>

and if you want more features, you can try HandleBar.JS HandleBar JS

1. Basic HandleBarjs expressions