Drag drop

by navyflower

HTML

<div class="words-list">
    <p><span class="word-single" id="word11">growing</span>  <span class="word-single" id="word7">routine</span>
 <span class="word-single" id="word0">used</span>  <span class="word-single" id="word6">turned</span>  <span class="word-single" id="word1">laughing</span>  <span class="word-single" id="word3">difficult</span>  <span class="word-single" id="word4">needed</span>  <span class="word-single" id="word5">working</span>  <span class="word-single" id="word10">Anne</span>  <span class="word-single" id="word8">daughter</span>  <span class="word-single" id="word2">train</span>  <span class="word-single" id="word9">seemed</span>

    </p>
</div>
<p>I don't remember what Chris and I
    <input id='blank0' class='blank' type='text' name='blank0' size='4' data-hint='used' data-correct='used' data-value='u(1)'>to do on Saturdays and Sundays. As far as I remember, all our days with each other
    <input id='blank6' class='blank' type='text' name='blank6' size='5' data-hint='turned' data-correct='turned' data-value='t(1)'>into working days. It was the same
    <input id='blank7' class='blank' type='text' name='blank7' size='6' data-hint='routine' data-correct='routine' data-value='r(1)'>, over and over again. Our
    <input id='blank8' class='blank' type='text' name='blank8' size='7' data-hint='daughter' data-correct='daughter' data-value='d(1)'>Anne was three years old when he left to Canada for work and we were confident about our future.  I had a few friends who suppported and comforted me during those
    <input id='blank3' class='blank' type='text' name='blank3' size='8' data-hint='difficult' data-correct='difficult' data-value='d(1)'>times. I was so happy to see our sweet Anne
    <input id='blank11' class='blank' type='text' name='blank11' size='6' data-hint='growing' data-correct='growing' data-value='g(1)'>so fast, but I wished Chris were with us. She
    <input id='blank4' class='blank' type='text' name='blank4' size='5'...

CSS

span.word-single {
    background-color: #bacfb8;
    font-weight: bold;
    padding: 5px;
    line-height: 2.2em;
}
.activated {
    border: 2px solid red;
}

JavaScript

(function ($) {
    function dragEnrol(el) {
        return (el.attr("id") === "drag1") ? true : false;
    }
    var dragOpts = {
        revert: true,
        stack: ".word-single"
    }
    $(".word-single").draggable(dragOpts);
    var dropOpts = {
        accept: "#word0",
        activeClass: "activated"
    };
    $("#blank0").droppable(dropOpts);
})(jQuery);