Join Joseph Lowery for an in-depth discussion in this video Dragging the text, part of HTML5 Projects: Photo Card Titles.
- View Offline
Given how difficult it is to enable drag-and-drop in HTML5, not to mention…how cool it is to be able to move page elements at will, it's going to be kind…of anticlimactic when you see how easy it is to implement drag and drop with canvas.…Would you believe one line of code--and a small one at that? Let's get to it.…So basically, as step four says, add a caption to your photo card and drag it into place.…So we want to make the text object, a.k.a. the caption, draggable.…
And for that we're going to need to revisit our definition of the text…object, which starts on line 134 of canvas_custom.js, found in the Chapter…3/03_06 scripts folder.…So I'm going to add a comma after text:…theMessage, on line 137 so I can add another property and enter our one line of code: draggable:…true, and that's it.…So let's save the page and take our text for a drive.…
Back to the browser, hit refresh, enter some code, and move it around.…The great thing about the drag-and- drop is that you can move it literally…anywhere on your canvas.…
Check out the rest of the HTML5 Projects series.
- Setting up a caption submission form
- Creating basic text entry fields
- Integrating color pickers in the form
- Applying text effects like shadows and gradients