drag and drop jquery not working

Question

I'm trying to drag the boxes from the man to the top of the car, target div called 'droppable'. This seems to work when previewing from Dreamweaver but not when previewing in jsfiddle:

http://jsfiddle.net/dantest2014/9JTSQ/7/

$(function () {

var dfd1 = $.Deferred();
var dfd2 = $.Deferred();


$("#lft_box_layer").draggable({
    revert: "invalid",
    cursor: "move"
});
$("#rgt_box_layer").draggable({
    revert: "invalid",
    cursor: "move"
});
$("#btm_box_layer").draggable({
    revert: "invalid",
    cursor: "move"
});

$("#droppable").droppable({

    accept: "#lft_box_layer, #rgt_box_layer, #btm_box_layer",



    // tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch'
    tolerance: 'intersect',
    // Add .hoverClass whenever #draggable is being hovered over #droppable
    over: function (event, ui) {
        $('.ui-draggable-dragging').addClass('hover');
    },
    // Remove .hoverClass whenever #draggable is no longer hovered over #droppable
    out: function (event, ui) {
        $('.ui-draggable-dragging').removeClass('hover');
    },
    // Add .dropClass whenever #draggable is dropped on #droppable
    drop: function (event, ui) {
        $('.ui-draggable-dragging').removeClass('hover').addClass('drop');


        $('.ui-draggable-dragging').draggable('option', 'disabled', true);


        $("#car").attr('src', "images/removals-car-break.jpg");


    }

});

});

Can someone help me with this?

After the three boxes have been dragged to the top of the car I would like to trigger a change of car image and also change the text.

Any help with any part of this question would be great. Thanks! Dan

Answer 1

In order to preview it on JSFiddle you first need to implement jQueryUI (not just jQuery) on the project.

Here is the same example with jQueryUI bound into your project (and cleaned the code a little to not waste code calling the draggable for all of the elements): http://jsfiddle.net/9JTSQ/11/

    $(".toDrag").draggable({
        revert: "invalid",
        cursor: "move"
    });

    $("#droppable").droppable({    
        accept: ".toDrag",
        .....................    
    });

I just bound jQueryUI from its CDN in "external resources"