Let's make the drag-and-drop code a little bit more complicated. We are going to change the main page markup and the JavaScript slightly to make it more challenging to automate.
First of all, we are going to change the HTML code by adding a <span> element in each draggable element. We are going to move the text for the element into this <span>, as follows:
<ul> <li> <div id="one" href="#" class="draggable"> <span>one</span> </div> </li> <li> <div id="two" href="#" class="draggable"> <span>two</span> </div> </li> <li> <div id="three" href="#" class="draggable"> <span>three</span> </div> </li> <li> <div id="four" href="#" class="draggable"> <span>four</span> </div> </li> <li> <div id="five" href="#" class="draggable"> ...
