To highlight some of the basic features and considerations of drag-and-drop we'll create a shopping basket application, which can be used by visitors to drag products they want to buy into the basket.
The page that we'll end up with by the end of this example will look like this:
 |
We'll need to include the ever-present yahoo-dom-event.js and reset-fonts-grids.css, to which we'll add dragdrop-min.js.
We'll use the doc3 100% fluid page layout and the t6 template to give us a convenient right-hand side bar in the main body of the page into which we can place our shopping basket. A further CSS file contains all the decoration for this example.
Let's add the code for the product catalog first. Normally, this kind of data would come out of a database dynamically when the page gets loaded, but in this example, the database is hard-coded into the page as an array, as if it had just been JSON-decoded from a remote request:
var products = [
{
name:'Abit KT7',
image:'prod1.jpg...