Unable to setData (of 'undefined') to allow element drag and drop

I'm trying to drop an element into another element but it's not working. The errors I get are

Uncaught TypeError: Cannot read property 'setData' of undefined

and

Uncaught TypeError: Cannot read property 'getData' of undefined

with the second one depending on the first one of course.

The element I'm trying to drop looks like this:

<main id="post-it" class="post-it-content">
    <div class="vertical-stripes"></div>
    <div class="vertical-stripes"></div>
    <ul class="nav">
        <li>
            <span class="normal-text"></span>
            <span class="normal-text"></span>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="notes-footer"></li>
    </ul>
    <textarea id="notes-area"></textarea>
</main>

This is the yellow looking note in the picture further down.

And then I handle the drag and dropping like so:

var dragAndDrop = {
    allowDrop: function(e) {
        e.preventDefault();
    },
    drop: function(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData("text");
        e.target.appendChild(document.getElementById(data));
    },
    drag: function(e) {
        e.dataTransfer.setData("text", e.target.id);
        e.dataTransfer.effectAllowed = 'move';
    }
}

And bind the elements to the corresponding functions like this:

$('.post-it-content').on('dragstart', dragAndDrop.drag); //Yellow note element
li.on('drop', dragAndDrop.allowDrop);
li.on('dragover', dragAndDrop.drop);

Where the li element(s) are the square(s) in this image:

Now what I'm not understanding is why I get the errors that I get, I'm doing it exactly like the example found here (although not with an image): http://ift.tt/1byjPp9 but for me it's not working. Any ideas why this isn't working?