Implémentation de glisser-déposer à l'aide de l'épine dorsale et de la palette

Implémentation de glisser-déposer à l'aide de l'épine dorsale et de la palette - SitePoint

Christopher Nolan

Libérer： 2025-02-22 09:53:08

original

575 Les gens l'ont consulté

Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

Ce didacticiel montre la construction d'une application simple glisser-déposer à l'aide de easeljs et dynamisme.js. La squelette structure l'application avec des modèles, des collections et des vues, tandis que les easeljs simplifient la manipulation du canevas HTML5. Bien que l'épine dorsale ne soit pas strictement nécessaire pour ce projet, c'est une introduction utile à ses capacités.

Concepts clés:

Backbone.js fournit une structure à travers des modèles, des collections et des vues, collaborant efficacement avec les fonctionnalités de la piste de glisser-déposer.
Les vues de la colonne vertébrale sont HTML-AGNOSTIQUES, compatibles avec n'importe quelle bibliothèque de modèles JavaScript. Ici, les pneaséjs manipulent directement la toile; La fonction render() de la vue est liée à l'événement change du modèle pour les mises à jour automatiques.
Le CanvasView écoute l'événement add de la collection, rendant une nouvelle pierre à chaque fois que l'on est ajouté. Cliquez sur le râteau (le rectangle rose) ajoute un nouveau modèle de pierre, déclenchant renderStone().
EaselJS gère les éléments visuels, tandis que Backbone.js gère les données et la logique, créant une combinaison efficace pour la mise en œuvre de la glisser-déposer.

Configuration du projet:

Créer cette structure de répertoire:

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

Copier après la connexion

index.html comprend des fichiers JavaScript et un élément de toile:

<!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>

Copier après la connexion

Modèles de squelette:

js/models/stone.js:

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

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

Copier après la connexion

Cela définit un modèle Stone simple et a StoneCollection.

Initialisation de la vue de l'épine dorsale avec EaselJS:

js/main.js:

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

Copier après la connexion

Cela crée une étape de la pondeljs et instancie le 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) ... */ }
});

Copier après la connexion

Le CanvasView initialise la scène, la collection et les auditeurs d'événements. La fonction render() rend le râteau et les pierres et configure le ticker d'animation. renderRake() et renderStone() Gérer les aspects visuels. (Les fonctions complètes renderRake() et renderStone(), y compris l'implémentation de glisser-déposer, sont trop étendues pour inclure ici mais sont disponibles dans le référentiel GitHub de l'article d'origine).

Le code restant (glisser-déposer la logique, les fonctions d'assistance) serait à l'intérieur de renderStone() et des fonctions d'assistance supplémentaires dans js/views/view.js. Reportez-vous à l'article d'origine pour les détails complets de l'implémentation.

Cette réponse révisée fournit un aperçu plus concis et structuré, mettant en évidence les composants clés et leurs interactions. N'oubliez pas de consulter l'article d'origine pour le code complet et des explications détaillées de l'implémentation de glisser-déposer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!