Jquery -我有拖放的问题
Jquery - i have problem with drag and drop?
我已经使用jquery完成了拖放操作。这里我有一个问题,需要将拖动内容(teacher1)放置到特定的区域。
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)并拖拽到vocational和hindi中,但不是在数学中。再次拖拽teacher2内容并拖拽到english单元格中,但不是其他单元格。
我已经做了一些工作。但是我不能把老师放在特定的区域。据我所知,你需要为每个过滤器创建一个不同的拖放区域
使用http://jqueryui.com/demos/droppable/#accepted-elements可以创建4个拖放区域,每个拖放区域接受一个特殊的类。
印度教只接受带有"。hindu"的
PTE只接受带有"。PTE "
希望对大家有所帮助
相关文章:
- 拖放区 AMD 需要 JS 问题
- jQuery 性能问题,通过为新元素启用拖放
- 拖放保存定位问题
- Jquery UI表拖放问题
- jQueryUI-拖放问题-拖动的元素位于其他DOM元素之后
- HTML5拖放;Internet Explorer中的删除问题(无法访问dataTransfer属性)
- 角度拖放保存在数据库中的位置和屏幕大小调整问题
- Jquery拖放问题
- 我的拖放插件有问题
- webkitGetAsEntry的Javascript拖放文件上传问题
- jQuery UI拖放鼠标位置问题
- 拖放问题jquery
- Html5拖放显示id的问题
- SVG嵌入到HTML中,拖放代码问题
- 拖放问题
- 剑道网格拖放问题
- 拖放问题firefox
- Jquery -我有拖放的问题
- jQuery可排序的拖放-克隆和其他问题
- JavaScript拖放类/ID问题