This article describes how to use the lightweight javascript library createjs to implement drag-and-drop effects using Easel. if you want to learn more about Createjs, I will share my experience with you:
1. what is CreateJS?
Createjs is a lightweight javascript library. it is an open-source toolkit for building HTML5 games with rich interactive experience. using createjs, you can build many interesting animation games. For example, you can watch Html5 games such as Multi-Color games.
II. what tools does CreateJS have?
There are four engines in createjs:
- EaselJS: used to draw animations, vectors, and bitmaps. It provides a series of methods that support mobile device Touch (click, mousedown, pressup, and pressmove are the mouse click, press, release, and move events, but before you add createjs. Touch. enable ( <舞台对象> )).
- TweenJS: it is an engine used to create compensation animation. it can produce a continuously changing effect. (Flash shoes should be used to know what an animation is)
- SoundJS: it is an audio playback engine. you can select the audio format for playback based on the browser compatibility and performance. it can be loaded and detached at any time.
- PreloadJS: a resource pre-loading engine. you can specify the loading sequence and group resources by priority.
3. how can I use Easel to create a simple drag?
If you need to use EaselJs to drag an image at will, and click the image to make the image in the selected or unselected status, the selected status is the drag status, if the status is not selected, it cannot be dragged. You can drag up to one image. So how can we use EaselJs to achieve this requirement and support mobile devices? Let's talk about the source code.
HTML code: