jQuery如何获得拖拽到的目标区域的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值呢？

解决方案 »

  1.   

    在所有想当作被拖拽到的目标区域的对象标签里加个ondrop来处理，
    比如下面这个是你要处理的
    <div id="拖到这来" ondrop="alert(this.id);">进来44</div> 
      

  2.   

    刚才没看楼主的代码，里面有个地方更合适
    $(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"));//显示炸毁对象
    }
    });
    });
      

  3.   

    刚才没法测试。刚找了个在线的UI.JS试了下（JUI官方的打包比较麻烦），以上两个方式都好使。
    另外那个，就是第一次讲的，放到位置里就是了
    <div class="title">Target1</div>
    <div class=targetArea id=targetItem1 ondrop="alert(this.id);">目标1</div>
    </div>
    <div style="float:left;width:200px;">
    <div class="title">Target2</div>
    <div class=targetArea id=targetItem2 ondrop="alert(this.id);">目标2</div>
    </div>赶紧结帖吧。看着我回复记录里上百个没结的帖，太恼火了。