99久久综合狠狠综合久久aⅴ,妇女性内射冈站hdwww000

Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

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:

<!DOCTYPE html>
<html>
<head>
  <title>Drag and Drop with Backbone and EaselJS</title>
</head>
<body>
  <canvas id="testcanvas" height="640" width="480"></canvas>

  <??>
  <??>
  <??>
  <??>
  <??>
  <??>
  <??>
  <??>
</body>
</html>

Backbone Models:

js/models/stone.js:

var Stone = Backbone.Model.extend({});

var StoneCollection = Backbone.Collection.extend({
  model: Stone
});

This defines a simple Stone model and a StoneCollection.

Initializing the Backbone View with EaselJS:

js/main.js:

$(document).ready(function() {
  var stage = new createjs.Stage("testcanvas");
  var view = new CanvasView({stage: stage}).render();
});

This creates an EaselJS stage and instantiates the CanvasView.

js/views/view.js:

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) ... */ }
});

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!