Ractive.js – Create a droppable image div component with configurable size property

This example shows how to create a drag & drop image container with a configurable width and height; example’s requirements are jQuery and Ractive.js.

Download code

First off, let’s make a preview of what the user see when the page load:

Starred_MediaSoft_720x600

 

To display the page above, the developer has just to write the following code:

Ractive.js allows creating component for reusing in any web application.

The code for the image drag & drop div component is the following:

image_uploader_compo.html

The viewmodel will initialize the component and the page itself with the data to display; furthermore, the component fires an event ‘imagerefused’ in case the image dropped does not satisfy the width / height requirements specified in the imageuploader component, so it’s up to the viewmodel to catch and display a properly message.

viewmodel.js

Here’s the final result:

 

Starred_MediaSoft_720x600_image_deny
image uploader

Starred_MediaSoft_720x600_image_completed

Be the first to comment

Leave a Reply

Your email address will not be published.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax


*