HTML5 and CSS3, Second Edition

We’re using the :active pseudoclass to change the border on the card when the

user clicks and holds on the element.

Adding Cards to the Interface

First we need to write the code that adds a new card when we click on the

Add Card button. We do this with a little bit of jQuery, which we’ll wrap in

its own function:

html5_dragdrop/javascripts/cards.js

Line 1 addCardClickHandler=function(){

• window.currentCardIndex= window.currentCardIndex|| 0;


• $("#addcard").click(function(event){


• event.preventDefault();
  5


• varcard= $("
  ")


• .attr("id","card"+ (window.currentCardIndex++))


• .attr("class","card")


• .attr("draggable", true);
  10


• vareditor= $("
  ")


• .attr("contenteditable", true)


• .attr("class","editor");


• 
  

(^15) card.append(editor);

• card.appendTo($("#cards"));


• });


• };

When we add a card, we need to give it a unique ID. We could come up with

an elaborate mechanism to do that, but we’ll just use a simple counter. On

line 2, we reference a variable called _currentCardIndex on the window object. The

first time we call this function, the variable will be initialized to 0. We’re

declaring it on the window object so that subsequent calls to this function will

be able to see the value. Remember, the window object is available globally. In

a more complex scenario, we might create our own Application object and store

values in that object to avoid polluting the global space.

Then we create the new element for the card. We have an outer div element

that represents the card, and an inner div element that has the contenteditable

attribute set. This is the card’s text. We use the jQuery function to create the

card element, and then, on line 7, we set the ID by incrementing the _current-

CardIndex by one.

Finally, we apply a class of card to the element, set its draggable attribute, and

append the card to the cards region. At this point we can click the Add Card

report erratum • discuss

Getting It All Sorted Out with Drag and Drop • 233

Download from Wow! eBook <www.wowebook.com>