Description

Well, this example aims to show you (in a easy way) how to draw and move shapes into a limited area (not throw them in the body), check the boundaries and restrict their position according to the context where they are, using Backbone.js. Besides, this is my first application using Backbone.js so, perhaps you might find errors or improve how the things are made. If do, please feel free to send the improvements and collaborate with this project :).

Backbone.js component used:
Usage
  • Move the mouse over the "Draw and moving area"
  • Once the coursor change, click and drag and then release the mouse Beta!
  • A square will be drawn
  • Drag and drop the squares or select by clicking them and move using the arrow keys. Beta!

Draw & Moving area


Source code

HTML Markup

First, define the drawing/moving areas for your shapes

          <div id="app_context"></div>
          <script type="text/javascript" src="apps/moving/moving.js"></script>
          ...
          or
          ...
          <script type="text/javascript" src="apps/moving/moving.min.js"></script>
          ...
         

I've included the minified version of the application. If you want to see the original (unpacked) version click here

Javascript code

This is the default setup

        var world = new Context({
            el: $(document)
        });
    
        var MovingArea = new MovingAreaView({
            id: 'app_context',
            el: $('#app_context'),
            collection: Shapes,
            world: world,
            active: true
        });

Download

 

Using Github

Awesome! this is the best way to download this small application.

        git clone git@github.com:aboyon/backbone-apps.git

Download the ZIP file

If you're not familiar usign console commands or using GitHub, you can click in this link and download this file in a zip format.


About this document & the author

Not too much to say about these things. Just a few comments.
About this document, please if you find a grammar/translation error or a technical mistake, please let me know writing an email to contact@davidsilveira.me. You can use, improve, and distribute this application as you wish. Use under licence GPL3 About me, you already know my name, David Silveira, I'm from Argentina. I'm always looking for new job opportunities.