我有一个清单,其中有记录。数据是通过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 " + jsondata.CSectionName + '</li><br/>');
}
if (jsondata.CSectionType == '2') {
$("#sectionlist").append("<li id=" + jsondata.CSectionId +">" + "# " + jsondata.CSectionName + '</li><br/>');
}
if (jsondata.CSectionType == '3') {
$("#sectionlist").append("<li id=" + jsondata.CSectionId +">" + "D " + 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;
}