Rumah >hujung hadapan web >tutorial js >Melaksanakan seret dan jatuhkan menggunakan Backbone dan Easeljs - SitePoint

Melaksanakan seret dan jatuhkan menggunakan Backbone dan Easeljs - SitePoint

Christopher Nolanasal: 2025-02-22 09:53:08579semak imbas

Implementing Drag and Drop Using Backbone and EaselJS - SitePoint

Tutorial ini menunjukkan membina aplikasi drag-and-drop mudah menggunakan Easeljs dan Backbone.js. Backbone Struktur aplikasi dengan model, koleksi, dan pandangan, manakala EaselJS memudahkan manipulasi kanvas HTML5. Walaupun tulang belakang tidak diperlukan untuk projek ini, ia merupakan pengenalan yang berguna kepada keupayaannya.

Konsep Utama:

paparan dikaitkan dengan acara render() model untuk kemas kini automatik. change
mendengar untuk acara CanvasView koleksi, menjadikan batu baru setiap kali ditambah. Mengklik Rake (Rectangle Pink) menambah model batu baru, mencetuskan add. renderStone()

Persediaan Projek:

Buat struktur direktori ini:

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

Termasuk fail JavaScript dan elemen kanvas: 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>

Model tulang belakang:

: js/models/stone.js

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

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

Ini mentakrifkan model

mudah dan Stone. StoneCollection

memulakan pandangan tulang belakang dengan 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>

Ini mewujudkan tahap easeljs dan instantiates

. 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

memulakan peringkat, koleksi, dan pendengar acara. Fungsi CanvasView memberikan rake dan batu, dan menetapkan ticker animasi. render() dan renderRake() mengendalikan aspek visual. (The Complete renderStone() dan renderRake() Fungsi, termasuk pelaksanaan drag-and-drop, terlalu luas untuk dimasukkan ke sini tetapi boleh didapati di repositori GitHub artikel asal). renderStone()

Baki kod (seret dan drop logik, fungsi penolong) akan berada dalam

dan fungsi penolong tambahan dalam renderStone(). Rujuk artikel asal untuk butiran pelaksanaan lengkap. js/views/view.js

Sambutan yang disemak ini memberikan gambaran keseluruhan yang ringkas dan berstruktur, menonjolkan komponen utama dan interaksi mereka. Ingatlah untuk merujuk artikel asal untuk kod lengkap dan penjelasan terperinci mengenai pelaksanaan drag-and-drop.

Atas ialah kandungan terperinci Melaksanakan seret dan jatuhkan menggunakan Backbone dan Easeljs - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：5 Bootstrap Kata Laluan Kekuatan Meter/Demo KerumitanArtikel seterusnya：5 Bootstrap Kata Laluan Kekuatan Meter/Demo Kerumitan

Artikel berkaitan

Lihat lagi