我是javascript + jquery的新手，我正在使用一个调度工具来迭代课程数据，将当前房间写入表格，并根据单元格创建和定位课程表＃39; s id。所有这些都很好，但我在使用jquery-ui扩展拖放功能时遇到了麻烦。
基本上，每个课程都有自己唯一的课程，分配给该课程中的所有跨度（组###），每个范围都有自己唯一的ID（[abc ...] ###）。如果我抓住任何跨度，我希望能够将所述跨度及其兄弟在.group ###中放到新的计划位置，（或者可能移动一个跨度，从旧位置删除其兄弟，并重新创建它们在相关的位置）但我不知道如何去做。我的真实代码将有超过7周的课程，但为了清晰起见，小提琴仅包括2个。
下面是拖放jquery（带有一些注释的想法）。
$(document).ready(function(){
$("span").on("dragstart", function (event) {
//var x = $(this).attr('class');
//var z = $(this).attr('id');
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'))
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
de.appendTo($(this));
//var x = $(de).attr('class').split(' ')[1];
//var b = $("." + x +":not(:has(" + de +"))");
//console.log(b);
};
});
});
答案 0 :(得分：0)
您可能会喜欢某种基本示例：http://jqueryui.com/droppable/#photo-manager
由此，我们可以做一个基本的工作示例：
$(function() {
$(".crse").draggable({
opacity: 0.35,
revert: "invalid",
containment: $("#scOut tbody"),
helper: "clone",
cursor: "move",
start: function(e, ui) {
$(this).parent().toggleClass("filled slot");
}
});
$("td[id^='Room']").droppable({
accept: ".crse",
drop: function(e, ui) {
addCourse(ui.draggable, $(this));
}
});
function addCourse($item, $target) {
$item.fadeOut(function() {
$item
.appendTo($target)
.fadeIn();
});
}
});table {
border-collapse: collapse;
width: 100%;
}
th,
tr td:nth-child(1) {
font-size: 12px;
font-weight: bold;
}
tr:nth-child(1n+2) {
height: 50px;
}
tr:nth-child(2n+3) {
background-color: #eee;
}
td:nth-child(4n+1) {
border-right: 2px solid #000;
}
td {
height: auto;
min-width: 40px;
width: auto;
position: relative;
max-width: 90px;
}
td:nth-child(1) {
width: 110px;
}
td:nth-child(1n+1) {
border-right: 2px solid #eee;
}
span {
display: block;
position: absolute;
top: 0;
left: 0;
height: 90%;
width: 90%;
padding: 2px;
margin: 0;
font-size: 10px;
text-align: center;
background-color: rgb(60, 181, 181);
}
tr:nth-child(1) th,
tr:nth-child(2) th:nth-child(4n),
td.rooms,
td:nth-child(4n+1) {
border-right: 2px solid #000;
}
table tr td {
position: relative;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="scOut">
<tr>
<th rowspan="2" id="rooms" class="rooms">Room</th>
<th colspan="4">Week1</th>
<th colspan="4">Week2</th>
</tr>
<tr>
<th id="scw1t1">8:30</th>
<th id="scw1t2">12:00</th>
<th id="scw1t3">3:15</th>
<th id="scw1t4">6:30</th>
<th id="scw2t1">8:30</th>
<th id="scw2t2">12:00</th>
<th id="scw2t3">3:15</th>
<th id="scw2t4">6:30</th>
</tr>
<tr>
<td>Room 1</td>
<td id="Room_1scw1t1" class="filled">
<span id="a100" class="crse group100">Course 1</span>
</td>
<td id="Room_1scw1t2" class="filled">
<span id="a102" class="crse group102">Course 2</span>
</td>
<td id="Room_1scw1t3" class="slot"></td>
<td id="Room_1scw1t4" class="slot"></td>
<td id="Room_1scw2t1" class="filled">
<span id="b100" class="crse group100">Course 1</span>
</td>
<td id="Room_1scw2t2" class="filled">
<span id="b102" class="crse group102">Course 2</span>
</td>
<td id="Room_1scw2t3" class="slot"></td>
<td id="Room_1scw2t4" class="slot"></td>
</tr>
<tr>
<td>Room 2</td>
<td id="Room_2scw1t1" class="slot"></td>
<td id="Room_2scw1t2" class="slot"></td>
<td id="Room_2scw1t3" class="filled">
<span id="a103" class="crse group103">Course 3</span>
</td>
<td id="Room_2scw1t4" class="slot"></td>
<td id="Room_2scw2t1" class="slot"></td>
<td id="Room_2scw2t2" class="slot"></td>
<td id="Room_2scw2t3" class="filled">
<span id="b103" class="crse group103">Course 3</span>
</td>
<td id="Room_2scw2t4" class="slot"></td>
</tr>
</table>
小提琴：https://jsfiddle.net/Twisty/rgw049r6/1/
如果你想基于选择器移动一个组，你可以这样做，但它更复杂。我们可以将组数据添加到start中的帮助程序，然后将该组附加到drop中。或者，您只需使用拖动的项目并在drop中创建该组，然后附加该组。
<强>更新
正如我所提到的，移动多个项目可能会更复杂。
考虑一下：https://jsfiddle.net/Twisty/rgw049r6/6/
我们必须检测更改的内容并定位其他项目。
<强>的JavaScript
$(function() {
$(".crse").draggable({
opacity: 0.35,
revert: "invalid",
containment: $("#scOut tbody"),
helper: "clone",
cursor: "move",
start: function(e, ui) {
$(this).parent().toggleClass("filled slot");
ui.helper.data("source-id", $(this).parent().attr("id"));
}
});
$("td[id^='Room']").droppable({
accept: ".crse",
drop: function(e, ui) {
// perform the same for other items in group
var cs = ui.draggable.attr("class").split(" ");
var group, tCell;
var $target = $(this);
var src = parseId(ui.helper.data("source-id"));
var trg = parseId($(this).attr("id"));
$.each(cs, function(k, v) {
if (v.indexOf("group") === 0) {
group = v;
}
});
$("." + group + ":not('.ui-draggable-dragging')").each(function(ind, elem) {
var sID = parseId($(elem).parent().attr("id"));
var tID = detectChange(sID, trg);
addCourse($(elem), $("#" + tID.id));
})
}
});
function addCourse($item, $target, notHelper) {
console.log("Adding: " + $item.attr("id") + " to: " + $target.attr("id"));
var me;
$item.fadeOut(function() {
if (notHelper != true || notHelper == "undefined") {
$item
.appendTo($target)
.fadeIn();
} else {
me = $item.detach();
me.appendTo($target).fadeIn();
}
});
}
function parseId(s) {
var results = {
id: s,
room: parseInt(s.slice(5, 6)),
week: parseInt(s.slice(9, 10)),
time: parseInt(s.slice(11, 12))
};
return results;
}
function makeId(r, w, t) {
return "#Room_" + r + "scw" + w + "t" + t;
}
function detectChange(s, t) {
var result = s;
if (s.room != t.room) {
result.room = t.room;
}
if (s.week != t.week) {
result.week = s.week
}
if (s.time != t.time) {
result.time = t.time;
}
result.id = "Room_" + result.room + "scw" + result.week + "t" + result.time;
console.log(result);
return result;
}
});