Kendo Sortable (two columns): Issues moving panels

Question

Here's my working code so far:

http://jsfiddle.net/fmpeyton/9a8sxw9z/

Here's the Kendo Sortable initiator:

$(".panels").kendoSortable({
    filter: ".panel",
    cursor: "move",
    change: function () {

    },
    placeholder: function (element) {
        return element.clone()
        .css({ "opacity": 0.8, });
    },
    hint: function (element) {
        return element.clone()
        .css({ "border": "1px solid #a2a2a2" })
        .height(element.height())
        .width(element.width());
    }
});

I'm having a few issues:

1. When I move all of the panels from out of a column, I cannot move any panels back into the empty column
2. In some rare cases, I can't move certain panels. (One scenario I can reproduce is moving "Panel 1" from the left column to the top of the right column. Even though the panel placeholder shows, the panel always reverts back to its original position.)
3. When I have "Panel 1" in the left column and the other three panels in the right, in order to be able to drop a panel underneath the "Panel 1" I need to first drag it over "Panel 1" to trigger this functionality. Ideally, I'd like to be able to drag it underneath and drop it there.

Any idea why these things might be happening? Are there any CSS changes that I could make to solve this?

Answer 1

The way I solved this issue is two-fold:

1. Initializing two instances of the Sortable widget and connecting them via the connectWith option
2. Adding a min-height to the columns, so that you can add panels to empty columns.

Big props to @OnaBai for helping to solve this. Here's a working fiddle: http://jsfiddle.net/fmpeyton/m72f5z6h/