Jquery UI Droppable not working giving an error in Firefox and chrome?

Question

I am using Jquery Ui Draggable and droppable. The Draggable is working fine and the items are dragging, but for some reasons I didn't get the droppable working.

If I alert something in the droppable function nothing displays.

I am using Jquery UI 1.6 and jquery 1.3.2.

This is the code I am using :

$(function() {
        $( "div.view-test-attributes .views-view-grid td" ).draggable({
                helper:'clone',
                cursor:'move'
            });
        $( "#ajaxCartUpdate" ).droppable({
            drop: function( e, ui ) {
                alert( "Dropped!" );
            }
        });
    });

When I drag the td in the ajaxCartUpdate div I am getting the following errors on console :

In Firefox : F is undefined

In Chrome : Uncaught TypeError: Cannot read property 'options' of undefined.

FYI the td's are actually dropping in the ajaxcartUpdate Div, but I am not getting the alert.

Answer 1

You need comma for each selector, in your case, it is "div.view-test-attributes,.views-view-grid,td" in the selector. See example below.

$(function() {

    $( "div.view-test-attributes,.views-view-grid,td" ).draggable({
            helper:'clone',
            cursor:'move'
        });
    $( "#ajaxCartUpdate" ).droppable({
        drop: function( e, ui ) {
            alert( "Dropped!" );
        }
    });
});