suchen

Heim >Web-Frontend >js-Tutorial >Implementierung von Drag & Drop mit Backbone und Opeljs - SitePoint

Implementierung von Drag & Drop mit Backbone und Opeljs - SitePoint

Christopher Nolan
Christopher NolanOriginal
2025-02-22 09:53:08579Durchsuche

Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

Dieses Tutorial zeigt, dass eine einfache Drag-and-Drop-Anwendung mit Easeljs und Backbone.js erstellt wird. Backbone strukturiert die App mit Modellen, Sammlungen und Ansichten, während Easeljs die Manipulation von HTML5 -Leinwand vereinfacht. Obwohl Backbone für dieses Projekt nicht ausschließlich notwendig ist, ist es eine nützliche Einführung in seine Fähigkeiten.

Schlüsselkonzepte:

  • Backbone.js bietet Struktur durch Modelle, Sammlungen und Ansichten, die effektiv mit EaselJs für Drag-and-Drop-Funktionen zusammenarbeiten.
  • Backbone-Ansichten sind HTML-Agnostic, kompatibel mit jeder JavaScript-Vorlagenbibliothek. Hier manipuliert Osten die Leinwand direkt; Die Funktion der Ansicht render() ist mit dem Ereignis des Modells für automatische Updates verknüpft. change
    • Die
  • hört für das Ereignis der Sammlung CanvasView und rendert jedes Mal einen neuen Stein, wenn man hinzugefügt wird. Klicken Sie auf den Rake (das rosa Rechteck) fügt ein neues Steinmodell hinzu, das add renderStone() auslöst
    • Easeljs verwaltet die visuellen Elemente, während Backbone.js Daten und Logik übernimmt und eine effiziente Kombination für die Implementierung von Drag & drop erstellt.

Projekt -Setup:

Erstellen Sie diese Verzeichnisstruktur: 

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

Enthält JavaScript -Dateien und ein Canvas -Element: index.html 

<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 -Modelle:

: js/models/stone.js 

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

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

Modell und ein Stone. StoneCollection

Initialisierung der Backbone -Ansicht mit Osten:

: js/main.js 

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

. 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>
Die

initialisiert die Bühnen-, Sammlung- und Event -Hörer. Die Funktion CanvasView rendert den Rake und die Steine ​​und richtet den Animations -Ticker ein. render() und renderRake() Behandeln Sie die visuellen Aspekte. (Die vollständigen Funktionen renderStone() und renderRake() einschließlich Drag & drop-Implementierung sind zu umfangreich, um hier aufzunehmen, sind jedoch im Github-Repository des ursprünglichen Artikels verfügbar. renderStone() Der verbleibende Code (Drag & Drop -Logik, Helferfunktionen) würde in

und zusätzliche Helferfunktionen innerhalb von

liegen. Die vollständigen Implementierungsdetails finden Sie im Originalartikel. renderStone() js/views/view.js Diese überarbeitete Antwort bietet einen prägnanteren und strukturierten Überblick, der die Schlüsselkomponenten und deren Interaktionen hervorhebt. Denken Sie daran, den ursprünglichen Artikel für den vollständigen Code und die detaillierten Erklärungen der Drag & Drop-Implementierung zu konsultieren.

Das obige ist der detaillierte Inhalt vonImplementierung von Drag & Drop mit Backbone und Opeljs - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 html for while include Directory using Event Collection JS function this animation canvas github
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：5 Bootstrap Passwort Stärke Messgerät/Komplexität DemosNächster Artikel：5 Bootstrap Passwort Stärke Messgerät/Komplexität Demos

In Verbindung stehende Artikel

Mehr sehen