jQuery可排序的connectWith

时间:2020-03-07 19:13:16

标签: javascript c# jquery asp.net

我有一个清单,其中有记录。数据是通过Web方法获取的。

 function getSectionData() {
            $.ajax({
                type: "POST",
                url: "../Provider/webmethodcall.aspx/GetAllSectionConfiguration",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    section = JSON.parse(data.d);
                    var list = document.createElement('li');
                    //var list = "";
                    $.each(section, function (i, jsondata) {
                        if (jsondata.CSectionType == '1') {
                            $("#sectionlist").append("<li id=" + jsondata.CSectionId+">" + "TX&nbsp;" + jsondata.CSectionName + '</li><br/>');
                        }
                        if (jsondata.CSectionType == '2') {
                            $("#sectionlist").append("<li id=" + jsondata.CSectionId +">" + "#&nbsp;" + jsondata.CSectionName + '</li><br/>');
                        }
                        if (jsondata.CSectionType == '3') {
                            $("#sectionlist").append("<li id=" + jsondata.CSectionId +">" + "D&nbsp;" + jsondata.CSectionName + '</li><br/>');
                        }
                    });
                }
            });
        }

这是我的 UL ,我将上面的记录绑定在其中

<ul id="sectionlist" class="connectedSortable" title="SectionName"></ul>

现在我还有另一个 3 UL ,在其中拖放“ SECTIONLIST”值。效果也不错。

 <ul id="sortable2" class="connectedSortable" title="Layer1">
        <li></li>
        </ul>
        <ul id="sortable2Layer2" class="connectedSortable" title="Layer2">
        <li></li>
        </ul>
        <ul id="sortable2Layer3" class="connectedSortable" title="Layer3">
        <li></li>
        </ul>

这是我使用的juqery函数,我可以拖放值

$(function () {
    $("#sectionlist, #sortable2, #sortable2Layer2, #sortable2Layer3").sortable({
           connectWith: ".connectedSortable"
        }).disableSelection();
});

现在我的困惑/问题是如果我从“节列表”中拖动值并尝试将其拖放到“ sortable2Layer2”(第2层)或“ sortable2Layer3”(第3层)中,那么我需要一些消息删除“ sortable2”(LAYER1) FIRST 中的值。
这是我的CSS代码。

#sectionlist, #sortable2,#sortable2Layer2,#sortable2Layer3 {
    border: 1px solid #eee;
    width: 100px;
    /*min-height: 10px;*/
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sectionlist li, #sortable2 li ,#sortable2Layer2 li,#sortable2Layer3 li{
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

0 个答案:

没有答案
相关问题