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 {
border: 4px solid Red;
width: 500px;
height: 500px;
}
#square {
position: absolute; /* Absolute Positioning gives us free roam */
width: 60px;
height: 60px;
background: green; /* 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]()