我已经使用 jquery 插件完成了拖放工作， 查询:
$(document).ready(function() {
$(".list").draggable({helper: 'clone'});
$(".drop1").droppable({
accept: '.list',
hoverClass: 'dropareahover',
drop: function(ev, ui){
var targetId = $(this).attr("id");
var allTargets = $("#" + targetId, ".tble");
$("td#" + targetId).each(function() {
$(this).append(ui.draggable.text());
alert(ui.draggable.text())
});
}
});
})
HTML:
<div class="draggable">
<ul>
<li class="list" id="1">Teacher1</li>
<li class="list" id="2">Teacher2</li>
<li class="list" id="3">Teacher3</li>
<li class="list" id="4">Teacher4</li>
</ul>
</div>
<div class="drop">
<table class="tble">
<tr>
<td class="drop1 br" id="aa"> </td>
<td class="drop1 br" id="ab"> </td>
<td class="drop1 br" id="ac"> </td>
<td class="drop1 br" id="ad"> </td>
</tr>
<tr>
<td class="drop1 br" id="aa"> </td>
<td class="drop1 br" id="ab"> </td>
<td class="drop1 br" id="ac"> </td>
<td class="drop1 br" id="ad"> </td>
</tr>
</div>
CSS:
.draggable {
width:200px;
height:200px;
border:solid 1px #ccc;
}
.dropareahover {
background-color:#EFD2A4;
border-color:#DFA853;
}
.draggable ul {
margin:0px;
padding:0px;
}
.draggable ul li {
list-style-type:none;
}
.drop {
width:200px;
height:200px;
margin:10px 0px 0px 0px;
border:solid 1px #ccc;
}
.drop1 {
border:solid 1px #CCCCCC;
width:100px;
}
.drop ul {
margin:0px;
padding:0px;
}
.drop ul li {
list-style-type:none;
}
.tble{padding:0px 10px 0px 10px}
我想将 teacher1 放入多个 td 中。
最佳答案
$(document).ready(function() {
$(".list").draggable({helper: 'clone'});
$(".drop1").droppable({
accept: '.list',
hoverClass: 'dropareahover',
drop: function(ev, ui){
var targetId = $(this).attr("id");
var allTargets = $("#" + targetId, ".tble");
allTargets.append(ui.draggable.html());
}
});
});
关于jquery - 拖放 - 如何将内容拖放到多个 "td"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6689494/