No events on drop area

[Alan Mosley]

I am trying to use the drag and drop framework, but cant seem to get any events on the drop are, such as dragenter.

am I missing something? thanks

​

<div class="draggable">
    drag me
</div>
<div  id="test-area">
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
</div>

<script>

    $(document).ready(function () {

        $("#test-area").kendoDropTargetArea({
            dragenter: DragAndDrop.dropTargetOnDragEnter,
            dragleave: DragAndDrop.dropTargetOnDragLeave,
            drop: DragAndDrop.dropTargetOnDrop
        });

        $(".draggable").kendoDraggable({
            hint: function () {
                return $(".draggable").clone();
            },
            dragstart: DragAndDrop.draggableOnDragStart,
            dragend: DragAndDrop.draggableOnDragEnd
        });


    });


    var DragAndDrop = {
        draggableOnDragStart: function (e) {
            $(".draggable").addClass("hollow");
            $(".draggable").css("cursor", "no-drop");
            e.currentTarget.hide();

        },
        draggableOnDragEnd: function (e) {
            e.currentTarget.show();

        },
        dropTargetOnDrop: function () {
            alert(2);

        },
        dropTargetOnDragEnter: function () {
            alert(1);
            $(".draggable").css("cursor", "wait");

        },
        dropTargetOnDragLeave: function () {
            alert(3);

        }
    };


</script>

[Alan Mosley]

Solved
I had "kendoDropTargetArea" where it should have been "kendoDropTarget"
Thanks