Question

我使用jquery插件完成了拖放工作， 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">&nbsp;</td>
<td class="drop1 br" id="ab">&nbsp;</td>
<td class="drop1 br" id="ac">&nbsp;</td>
<td class="drop1 br" id="ad">&nbsp;</td>
</tr>
<tr>
<td class="drop1 br" id="aa">&nbsp;</td>
<td class="drop1 br" id="ab">&nbsp;</td>
<td class="drop1 br" id="ac">&nbsp;</td>
<td class="drop1 br" id="ad">&nbsp;</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。

Answer 1

$(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/

拖放 - 如何将内容放入多个“td”

1 个答案: