Drag and Drop - как перетащить контент на несколько «тд» - PullRequest
0 голосов
/ 14 июля 2011

Я выполнил перетаскивание, используя плагин 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}

Я хочу бросить учитель1 на несколько тд.

1 Ответ

2 голосов
/ 14 июля 2011
$(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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...