可排序的jQuery將div拖入td

Question

在我的項目中，我試圖做一個可排序的表。 我嘗試了很多，但是沒有找到解決方案。

問題1：我無法將div拖動到空的td。 問題2：我嘗試在拖動時從data屬性獲取數據。 （這）行不通...

我的JSfiddle： http : //jsfiddle.net/aq98v/6/

這是下面的代碼：

Javascript：

$(function(){   
    $("#dropable").sortable({
        items : ".drag",
        start: function() {
            displayValue(this);
        },
        stop: function() {
            hideValue();
        },
        receive: function() {
            dropped(this);
        }
    });
});

function toggleNumbers(e) {
    var time = $(e).data("time");
    var visitor = $(e).data("visitor");
    $(".lol").html("selected time ="+time+" selected visitor ="+visitor);
}

function hideValue() {
    $(".lol").html("Reboot");
}

function dropped(e) {
    var time = $(e).data("time");
    var visitor = $(e).data("visitor");
    $(".lol").html("Success Dropped!!! time ="+time+" And visitor ="+visitor);
}

html在JSfiddle中很長。 我在這里做一個簡短的。

<table>
    <thead>
         <tr><th class="col-lg-1">Monday</th></tr>
    </thead>
    <tbody id="dropable">
        <tr class="droping">
            <td>
                <div class="drag" data-time="09:00" data-visitor="12">
                    <span class="time">09:00</span>
                    <span class="visitor">12</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

感謝您的回應！

Answer 1

固定： http : //jsfiddle.net/aq98v/22/

$(function(){   
        $(".droping").sortable({
                 connectWith:"td",
                 placeholder: "ui-state-highlight"
        }).disableSelection();
});