Drag and Drop

Anybody know why the drop event is not working?  I followed the example in the html 5 book.

IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Well, you don't have any jquery code.  Here is a fiddle I found with the same html code  http://jsfiddle.net/ehoury/55uLpct4/

var $draggedItem;

$(document).ready(function () {
    // Drag
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    // Drop
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);

/* DRAG functions */
function dragging(e) {
    $draggedItem = $(e.target);

function draggingEnded(e) {

/* DROP functions */
function preventDefault(e) {
function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length == 0) {

Open in new window

IsaacSharePoint Client Side DeveloperAuthor Commented:
I do have jquery code. After comparing to the fiddle you found, I spelled a few things wrong like .preventDefault'.

Thanks though!
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Glad you found the issue.  There was no jquery code in the link you provided.  Just html and css.  Sometimes it just takes a break...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.