One of the hardest parts of my project was figuring out how to use jQuery correctly and, specifically, how to get its drag-and-drop code to work in iBooks. I pieced it together with the help of friends and people on Twitter, but I thought I’d write it out step-by-step for anyone who wants to try it in their own ebooks. So if you want to use drag-and-drop in your ebook, here’s how to do it (not supported in all e-readers).
1. Go here: http://jqueryui.com/. The UI stands for User Interface, and you can find all sorts of fun features here, such as tabs (which do work in iBooks, but not everything on this site does).
2. On the right, click on “Custom Download.” Uncheck “Toggle All” at the top, then make sure you select “Toggle All” under “UI Core” and also check “Draggable” and “Droppable” under “Interactions.” (For the purposes of this post, I’m assuming that you are only including drag-and-drop, but if you want to include other features in your ebook you can check their boxes as well). Doing a custom download with only what you need will help keep the size of your ebook down. You can change the theme if you want, and then click “Download.”
3. Go into the CSS folder of your download, copy the provided CSS files and the images folder, and paste them in your own CSS folder in your ebook. Do the same with all of the files in the js folder (if you don’t have a js folder in your ebook, create one on the same level as your CSS folder).
4. This next part will be determined by exactly what you want your drag-and-drop to do. In my Sherlock Holmes project, I have an interactive cluepad where you can drag selected clues. If the clue is correct, it will stay on the cluepad. If it is incorrect, it will bounce back. This is what I will be using for the purpose of this post, but you can play around with the other options if you’re looking for something different. Go back to the jQuery UI homepage and click on “Droppable” on the right. Select “Revert Draggable Position,” and then click “View Source” below. Copy everything between the script tags (but you won’t need the script tags themselves). Paste it into a new text document and save it as a .js file (I called mine draganddrop.js.). Add this .js file to your js folder as well.
For reference, this is what my draganddrop.js file consists of:
$(function() {
$( “.badclueleft” ).draggable({ revert: “valid” });
$( “.badclueright” ).draggable({ revert: “valid” });
$( “.goodclueleft” ).draggable({ revert: “invalid” });
$( “.goodclueright” ).draggable({ revert: “invalid” });
$( “.cluepad” ).droppable({
drop: function( event, ui ) {
$( this )
.find( “p” )
}
});
});
My “cluepad” class is the cluepad where the clues are dropped, and my “badclues” revert when they’re dropped on the cluepad, while my “goodclues” do not. You can style your classes for these functions however you like in your CSS.
5. There is one more jQuery that you need – and this is the key to making drag-and-drop work. It’s a hack that someone created called Touch Punch, and you can download it here: http://touchpunch.furf.com/. Download the Production version and place the .js file in your Javascript folder with the other jQuery files.
6. Now that you have everything you need, you need to do two things in your ebook to make the files work. The first one is listing everything you just added to your OEBPS file in the manifest of your content.opf file. When I say everything, I mean everything. This includes all the Javascript files, all the CSS files, and all of the image files. Here is what the relevant part of my manifest looks like:
<item id=”jquerycss” href=”css/jquery-ui-1.10.2.custom.css” media-type=”text/css”/>
<item id=”jquerymincss” href=”css/jquery-ui-1.10.2.custom.min.css” media-type=”text/css”/>
<item id=”jquery” href=”js/jquery-1.9.1.js” media-type=”text/javascript”/>
<item id=”jquerycustom” href=”js/jquery-ui-1.10.2.custom.js” media-type=”text/javascript”/>
<item id=”jquerymincustom” href=”js/jquery-ui-1.10.2.custom.min.js” media-type=”text/javascript”/>
<item id=”jquery.ui.touch-punch.min.js” href=”js/jquery.ui.touch-punch.min.js” media-type=”text/javascript”/>
<item id=”draganddrop.js” href=”js/draganddrop.js” media-type=”text/javascript”/>
<item id=”ui-bg_diagonals-thick_75_f3d8d8_40x40.png” href=”css/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png” media-type=”image/png”/>
<item id=”ui-bg_dots-small_65_a6a6a6_2x2.png” href=”css/images/ui-bg_dots-small_65_a6a6a6_2x2.png” media-type=”image/png”/>
<item id=”ui-bg_flat_0_333333_40x100.png” href=”css/images/ui-bg_flat_0_333333_40x100.png” media-type=”image/png”/>
<item id=”ui-bg_flat_65_ffffff_40x100.png” href=”css/images/ui-bg_flat_65_ffffff_40x100.png” media-type=”image/png”/>
<item id=”ui-bg_flat_75_ffffff_40x100.png” href=”css/images/ui-bg_flat_75_ffffff_40x100.png” media-type=”image/png”/>
<item id=”ui-bg_glass_55_fbf8ee_1x400.png” href=”css/images/ui-bg_glass_55_fbf8ee_1x400.png” media-type=”image/png”/>
<item id=”ui-bg_highlight-hard_100_eeeeee_1x100.png” href=”css/images/ui-bg_highlight-hard_100_eeeeee_1x100.png” media-type=”image/png”/>
<item id=”ui-bg_highlight-hard_100_f6f6f6_1x100.png” href=”css/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png” media-type=”image/png”/>
<item id=”ui-bg_highlight-soft_15_EEB4B4_1x100.png” href=”css/images/ui-bg_highlight-soft_15_EEB4B4_1x100.png” media-type=”image/png”/>
<item id=”ui-icons_004276_256x240.png” href=”css/images/ui-icons_004276_256x240.png” media-type=”image/png”/>
<item id=”ui-icons_cc0000_256x240.png” href=”css/images/ui-icons_cc0000_256x240.png” media-type=”image/png”/>
<item id=”ui-icons_ffffff_256x240.png” href=”css/images/ui-icons_ffffff_256x240.png” media-type=”image/png”/>
Make sure that you’re putting the correct media-types for everything and note that your jQuery files and your images will most likely have different names than mine do.
7. The last thing you need to do is to link all of your Javascript and CSS files in the heads of your XHTML files. The heads should look something like this:
<head>
<title>Cluepad</title>
<link href=”css/template.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/jquery-ui-1.10.2.custom.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/jquery-ui-1.10.2.custom.min.css” rel=”stylesheet” type=”text/css”/>
<script type=”text/javascript” src=”js/jquery-1.9.1.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.10.2.custom.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.10.2.custom.min.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.touch-punch.min.js”></script>
<script type=”text/javascript” src=”js/draganddrop.js”></script>
</head>
with your own title and file links instead.
8. That’s it! To use drag-and-drop in the page, just use the classes you’ve assigned to your draganddrop.js file. Here is the code for one of my cluepads:
<div class=”cluepad”>
<p class=”cluepadtext”>Cluepad</p>
<p class=”oldclue”>The photograph is cabinet-sized.</p>
</div>
<div class=”goodclueleft”>
<p class=”cluetext”>Irene Adler and Godfrey Norton are married.</p>
</div>
<div class=”badclueleft”>
<p class=”cluetext”>Irene will be returning to Briony Lodge at 8:00. </p>
</div>
<div class=”badclueright”>
<p class=”cluetext”>The church was the Church of St. John.</p>
</div>
<div class=”goodclueright”>
<p class=”cluetext”>Holmes’ plan involves throwing a smokebomb.</p>
</div>
and that creates drag-and-drop perfectly in iBooks.
I hope this post will be helpful to someone, and if anything doesn’t make sense or anything needs more clarification, just let me know!
chelsea hanna cohen 