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

Leave a Reply

Your email address will not be published. Required fields are marked *