Moving Object On Mouse Event Using Backbone

Introduction

In this article I will create an object that moves when the mouse moves. Here we use the "mousemove" event.

Let's see how to create this application:

We need to add the following scripting files:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

Step 1

Create a web application as in the following:

  • Start Visual Studio 2013. From the Start window select "New Project".
  • Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application".

Create Web Application

  • Click on the "OK" button.

Step 2

Now add the HTML page use the following:

  • In the Solution Explorer.
  • Right-click on the project then select "Add" -> "HTML page".

Add HTML Page

  • Change the name of the page.

Change Name

  • Click on the "Add" button.

Add these Script files in the <head> tag:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

Now add some CSS code to the <head> section:

<style>

        body {

            border4px solid Red;

            width500px;

            height500px;

        }

        #square {

            positionabsolute/* Absolute Positioning gives us free roam */

            width60px;

            height60px;

            backgroundgreen/* Default color */

        }

    </style>

Now create the main script code in the same HTML file using a <Script> tag, such as:

<body>

    <h1>Moving the object on mouse move</h1>

    <script type="text/javascript">

        // define model

        var ourModel = Backbone.Model.extend({

            initialize: function () {

 

                // Verify view is connected to model

                console.log('model initialized');

            },

 

            // Our move method

            move: function (elem, x, y) {

                $(elem).animate({

                    'left': x,

                    'top': y

                }, 500);

            }

        });

        var ourView = Backbone.View.extend({

            // Listen for mousemove event

            events: {

                "mousemove""mousemoveHandler"

            },

            initialize: function () {

                // Bind mousemove event to body

                $('body').on('mousemove'this.clickHandler);

            },

            // The view render

            render: function () {

                this.$el.html("<div id='square' />");

            },

            // The mousemove handler

            mousemoveHandler: function (event) {

                // Verify mousemove is being handled

                console.log('mousemove handler');

                // Instantiate model

                this.model = new ourModel();

                console.log(event);

                this.model.move(square, event.pageX, event.pageY);

            }

        });

        // Initiate view

        var view = new ourView();

        // Append to view to document body

        view.$el.appendTo(document.body);

        // FIRE

        view.render();

    </script>

</body>

Step 3

Now we will execute the application, and see the output:

Display object

When we drag the mouse on the object then it leaves the original position and when we drag the mouse in any direction the object will move in the same direction.

Moving object on mousemove

Step 4

We can also move the object on the other event of the mouse, here I will use another event of the mouse, the "click" event. When we click in any place in the body the object automatically moves on that place, in the code above we just changed the event of the mouse.

Code:

 var ourView = Backbone.View.extend({

            // Listen for click event

            events: {

                "click""clickHandler"

            },

            initialize: function () {

                //here bind click event to body

                $('body').on('click'this.clickHandler);

            },

            // The view render

            render: function () {

                this.$el.html("<div id='square' />");

            },

            // The click handler

            clickHandler: function (event) {

                // Verify click is being handled

                console.log('click handler');

                // Instantiate model

                this.model = new ourModel();

                console.log(event);

                this.model.move(square, event.pageX, event.pageY);

            }

        });

Move object on click