Question

I’m trying to create an unordered list (UL) in my div “#dropZone” if one doesn’t already exist.

If one does exist, I would like to add the dragged item as an additional LI of the UL.

I have three sources to drag from:

• #drg1
• #drg2
• #grid – or would this be my #mRow?

Here is a JSFiddle link to my attempt:

JSFiddle – Uncaught TypeError: Object [object Object] has no method ‘draggable’

var drpOptions = {
group: "gridGroup",
drop: function(event, ui) {
    if ($('#dropZone').has('ul')) {
        $("#list").append('<li>' + ui.draggable.text() + '</li>');
    } else {
        $("#dropZone").append('<ul id="list"><li>' + ui.draggable.text() + '</li></ul>');
    }
}};

Answer 1

The method is not draggable but kendoDraggable. Check example of using in the documentation.

You might want to define a hint function like this:

$("#drg1").kendoDraggable({
    hint: function (element) {
        return element.clone();
    }
});

$("#drg2").kendoDraggable({
    hint: function (element) {
        return element.clone();
    }
});

In order to see your divs floating around the page while you drag them.