Home >Web Front-end >JS Tutorial >Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

Christopher NolanOriginal: 2025-02-22 09:53:08583browse

This tutorial demonstrates building a simple drag-and-drop application using EaselJS and Backbone.js. Backbone structures the app with models, collections, and views, while EaselJS simplifies HTML5 canvas manipulation. Although Backbone isn't strictly necessary for this project, it's a useful introduction to its capabilities.

Key Concepts:

Backbone.js provides structure through models, collections, and views, effectively collaborating with EaselJS for drag-and-drop functionality.
Backbone views are HTML-agnostic, compatible with any JavaScript templating library. Here, EaselJS directly manipulates the canvas; the view's render() function is linked to the model's change event for automatic updates.
The CanvasView listens for the collection's add event, rendering a new stone each time one is added. Clicking the rake (the pink rectangle) adds a new stone model, triggering renderStone().
EaselJS manages the visual elements, while Backbone.js handles data and logic, creating an efficient combination for drag-and-drop implementation.

Project Setup:

Create this directory structure:

<code>.
|-- index.html
+-- js
    |-- main.js
    |-- models
    |   +-- stone.js
    +-- views
        +-- view.js</code>

index.html includes JavaScript files and a canvas element:

<code class="language-html"><!DOCTYPE html>


  <title>Drag and Drop with Backbone and EaselJS</title>


  <canvas id="testcanvas" height="640" width="480"></canvas>

  
  
  
  
  
  
  
  

</code>

Backbone Models:

js/models/stone.js:

<code class="language-javascript">var Stone = Backbone.Model.extend({});

var StoneCollection = Backbone.Collection.extend({
  model: Stone
});</code>

This defines a simple Stone model and a StoneCollection.

Initializing the Backbone View with EaselJS:

js/main.js:

<code class="language-javascript">$(document).ready(function() {
  var stage = new createjs.Stage("testcanvas");
  var view = new CanvasView({stage: stage}).render();
});</code>

This creates an EaselJS stage and instantiates the CanvasView.

js/views/view.js:

<code class="language-javascript">var CanvasView = Backbone.View.extend({
  initialize: function(args) {
    this.stage = args.stage;
    this.stage.enableMouseOver(20);
    this.collection = new StoneCollection();
    this.rakeOffsets = { /* ... (rake dimensions) ... */ };
    this.listenTo(this.collection, "add", this.renderStone, this);
    this.listenTo(this.collection, "remove", this.renderRake, this);
    this.listenTo(this.collection, "reset", this.renderRake, this);
  },
  render: function() {
    this.renderRake();
    this.stage.update();
    createjs.Ticker.addEventListener("tick", this.stage);
    createjs.Ticker.setInterval(25);
    createjs.Ticker.setFPS(60);
  },
  renderRake: function() { /* ... (rake rendering and click handler) ... */ },
  renderStone: function(model) { /* ... (stone rendering and drag-and-drop logic) ... */ }
});</code>

The CanvasView initializes the stage, collection, and event listeners. The render() function renders the rake and stones, and sets up the animation ticker. renderRake() and renderStone() handle the visual aspects. (The complete renderRake() and renderStone() functions, including drag-and-drop implementation, are too extensive to include here but are available in the original article's GitHub repository).

The remaining code (drag and drop logic, helper functions) would be within renderStone() and additional helper functions within js/views/view.js. Refer to the original article for the complete implementation details.

This revised response provides a more concise and structured overview, highlighting the key components and their interactions. Remember to consult the original article for the complete code and detailed explanations of the drag-and-drop implementation.

The above is the detailed content of Implementing Drag and Drop Using Backbone and EaselJS - SitePoint. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 html for while include Directory using Event Collection JS function this animation canvas github

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：5 Bootstrap Password Strength Meter/Complexity DemosNext article：5 Bootstrap Password Strength Meter/Complexity Demos

See more

Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

Related articles