Question

在我的项目中，我正在尝试做一个可排序的表格。我尝试了很多，但没有找到解决方案。

问题1：我无法将div拖到空td。问题2：我尝试在拖动时从数据属性中获取数据。（这）不会工作......

这是下面的代码：

使用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);
}

在JSfiddle中，HTML非常长。我在这里做一个简短的。

<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();
});

可排序的jQuery将div拖入td

1 个答案: