Drag and Drop - how to the drop the content into multiple "td"
I have done drag and drop work using with jquery plug-in, 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}
I want to drop the the teacher1 into multiple 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());
}
});
});
http://jsfiddle.net/1stein/tEWQg/
精彩评论