如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>jQuery's HelloWorld!</title>
<SCRIPT src="jq/jquery-1.3.2.min.js"
type=text/javascript></SCRIPT>
<SCRIPT src="jq/jquery-ui-1.7.2.custom.min.js"
type=text/javascript></SCRIPT>
<style type="text/css">
.title{
margin-bottom:10px;
}
.dragOtherItem{
BORDER-RIGHT: #dddddd 1px solid;
BORDER-TOP: #dddddd 1px solid;
width:50px;
height:50px;
BACKGROUND: url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) #eeeeee repeat-x 50% top;
BORDER-LEFT: #dddddd 1px solid;
COLOR: #333333;
BORDER-BOTTOM: #dddddd 1px solid
}
.dragItem{
border:1px solid #ccc;
width:50px;
height:50px;
margin-bottom:10px;
}
.targetArea{
border:1px solid red;
height:150px;
}
.targetActiveArea{
border:1px solid blue;
height:150px;
}
.targetHoverArea{
border:1px solid yellow;
height:150px;
}
.proxy{
border:1px solid #ccc;
width:80px;
background:#fafafa;
}
</style>
<SCRIPT type=text/javascript>
$(function() {
// 被拖拽的部分
$("#draggedItem").draggable();
// 被存放拖拽元素的部分
$("#targetItem1,#targetItem2").droppable({
accept:'#draggedItem',
activeClass:'targetActiveArea',
hoverClass:'targetHoverArea',
drop:function (ev,source) {alert($(source.draggable).attr("id"));}
});
}); </SCRIPT>
</head><body>Hello World!
<hr>
<!-- 可以被拖拽的部分 -->
<div style="float:left;width:200px;margin-right:20px;">
<div class="title">Source</div>
<div class=dragOtherItem id=draggedItem><font size=3 color=grey>拖拽</font></div>
</div><!-- 被拖拽到的区域 -->
<div style="float:left;width:200px;">
<div class="title">Target1</div>
<div class=targetArea id=targetItem1>目标1</div>
</div>
<div style="float:left;width:200px;">
<div class="title">Target2</div>
<div class=targetArea id=targetItem2>目标2</div>
</div>
</body>
</html>
如上代码的:drop:function (ev,source) {alert($(source.draggable).attr("id"));}部分,就获得了被拖拽的元素的id属性,并且在alert中显示出来,那么怎么获得目标区域的id属性呢?
比如,我把拖拽元素“draggedItem”拖拽到目标区域“targetItem1”中,那么,怎么在弹出的alert中显示出“targetItem1”的id值呢?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>jQuery's HelloWorld!</title>
<SCRIPT src="jq/jquery-1.3.2.min.js"
type=text/javascript></SCRIPT>
<SCRIPT src="jq/jquery-ui-1.7.2.custom.min.js"
type=text/javascript></SCRIPT>
<style type="text/css">
.title{
margin-bottom:10px;
}
.dragOtherItem{
BORDER-RIGHT: #dddddd 1px solid;
BORDER-TOP: #dddddd 1px solid;
width:50px;
height:50px;
BACKGROUND: url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) #eeeeee repeat-x 50% top;
BORDER-LEFT: #dddddd 1px solid;
COLOR: #333333;
BORDER-BOTTOM: #dddddd 1px solid
}
.dragItem{
border:1px solid #ccc;
width:50px;
height:50px;
margin-bottom:10px;
}
.targetArea{
border:1px solid red;
height:150px;
}
.targetActiveArea{
border:1px solid blue;
height:150px;
}
.targetHoverArea{
border:1px solid yellow;
height:150px;
}
.proxy{
border:1px solid #ccc;
width:80px;
background:#fafafa;
}
</style>
<SCRIPT type=text/javascript>
$(function() {
// 被拖拽的部分
$("#draggedItem").draggable();
// 被存放拖拽元素的部分
$("#targetItem1,#targetItem2").droppable({
accept:'#draggedItem',
activeClass:'targetActiveArea',
hoverClass:'targetHoverArea',
drop:function (ev,source) {alert($(source.draggable).attr("id"));}
});
}); </SCRIPT>
</head><body>Hello World!
<hr>
<!-- 可以被拖拽的部分 -->
<div style="float:left;width:200px;margin-right:20px;">
<div class="title">Source</div>
<div class=dragOtherItem id=draggedItem><font size=3 color=grey>拖拽</font></div>
</div><!-- 被拖拽到的区域 -->
<div style="float:left;width:200px;">
<div class="title">Target1</div>
<div class=targetArea id=targetItem1>目标1</div>
</div>
<div style="float:left;width:200px;">
<div class="title">Target2</div>
<div class=targetArea id=targetItem2>目标2</div>
</div>
</body>
</html>
如上代码的:drop:function (ev,source) {alert($(source.draggable).attr("id"));}部分,就获得了被拖拽的元素的id属性,并且在alert中显示出来,那么怎么获得目标区域的id属性呢?
比如,我把拖拽元素“draggedItem”拖拽到目标区域“targetItem1”中,那么,怎么在弹出的alert中显示出“targetItem1”的id值呢?
比如下面这个是你要处理的
<div id="拖到这来" ondrop="alert(this.id);">进来44</div>
$(function() {
// 被拖拽的部分
$("#draggedItem").draggable();
// 被存放拖拽元素的部分
$("#targetItem1,#targetItem2").droppable({
accept:'#draggedItem',
activeClass:'targetActiveArea',
hoverClass:'targetHoverArea',
drop:function (ev,source) {
alert($(source.draggable).attr("id"));//显示炸弹对象
alert($(this).attr("id"));//显示炸毁对象
}
});
});
赶紧结帖吧。看着我回复记录里上百个没结的帖,太恼火了。