jquery - 我有拖放問題？

-1

我已經完成使用jQuery的拖放。在這裏我有問題，需要將拖放內容（teacher1）放入特定區域。jquery - 我有拖放問題？

的jQuery：

$(document).ready(function() { 

    //var a ='1'; 
    $(".list").draggable({ 
    helper: 'clone', 
    cursor: 'hand', 
    revert: true, 
    drag: function(ev, ui) {  
     dragId = $(this).attr('id');   
     //alert(dragId); 
/*  if (dragId==1) { 
      dragClass = "drop1"; 
     } 
*/  /*else { 
     alert('Hi'); 
     }*/ 
    } 
    }); 
    $(".drop1").droppable({ 
     accept: ".list", 
     activeClass: 'drop-active', 
     hoverClass: 'dropareahover', 
     drop: function(ev, ui){ 
     //var dropDragId = ui.draggable.attr('id'); 
     //alert(dropDragId) 
     var targetId = $(this).attr("id"); 
     $("#" + targetId).each(function() {   
     $(this).append(ui.draggable.text());           
     }); 
    }, 
    destroy: function(ev, ui) { 
    } 
});  
}); 
</script>

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 id="td1" class="drop1 br">Vocational</td> 
    <td id="td2" class="drop br">English<br /></td> 
    <td id="td3" class="drop1 br">Mathematics<br /></td> 
    <td id="td4" class="drop br">French<br /></td> 
</tr> 
<tr> 
    <td id="td1a" class="drop br">Hindi</td> 
    <td id="td2a" class="drop br">Science<br /></td> 
    <td id="td3a" class="drop br">PTE<br /></td> 
    <td id="td4a" class="drop br">Social Science<br /></td> 
</tr> 
</table> 
</div>

CSS：

<style type="text/css"> 
.draggable { 
    width:400px; 
    height:auto; 
    border:solid 1px #ccc; 
} 
.dropareahover { 
    background-color:#EFD2A4; 
    border-color:#DFA853; 
} 
.drop-active { 
background: #ffff99; 
} 

.draggable ul { 
margin:0px; 
padding:0px; 
} 
.draggable ul li { 
list-style-type:none; 
} 
.drop { 
width:400px; 
height:auto; 
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{border-collapse:collapse;} 
.tble td{text-align:center;} 
</style>

我需要拖動的內容（teacher1）將拖放到職業和印地文，但不在數學。再次拖動teacher2內容並放入英文中，但不能放入其他單元格。

我已經做了一些工作。但我無法將teacher2放入特定區域。請幫助我。

來源

2011-07-18 Mr.T.K

我已經創建了一個搗鼓你，使得它更容易來測試這類問題。 http://jsfiddle.net/tRhnC/1/ –

感謝您爲我創建的小提琴......--)） –

據我瞭解，你需要爲每個過濾器

與http://jqueryui.com/demos/droppable/#accepted-elements創建一個不同的拖放區域，您可以創建4個拖放區域，每一個接受特殊類。

印度只接受那些「.hindu」

PTE只接受那些「.PTE」

我希望這有助於

來源

2011-07-18 12:42:38

是的，您說得對，我只提到4位老師，但老師在這個意義上增加了更多，我必須寫相同的方式或有任何其他方式來簡化 –

假設你所有的拖放區域都具有相同的類'.drop'，並且每個拖放區域都有一個特殊的'.PTEdrop'或'.hinduDrop'類型，您可以將所有他們有共同的下降屬性，然後執行如下操作：'code' $（「.hindu」）.droppable（「option」，「accept」，'.hindu'）;爲每個下降區域。（就像它變得簡單:)） –

jquery - 我有拖放問題？

回答

相關問題