Drag and Drop

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

http://jsfiddle.net/isogunro/n8wauqdn/1/
LVL 5
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) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

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

Open in new window

0
 
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!
0
 
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...
0
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.