PS:我要得到目标div的id 是因为我之后要判断碰撞。实现多拖动对象,多目标对象的碰撞
目前只能做到固定1个目标 多个拖动对象
------解决方案--------------------
改了个Demo给你,你按步骤来吧。
1:将以下css保存为css.css
- CSS code
body{
background-color:#777777;
color:#FFFFFF;
margin:0px;
padding:18px 0 0 18px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
.clear{clear:both;}
.ui-sortable{
background-color:#FFFFFF;
border:1px solid #555555;
color:#222222;
margin:0 15px 15px 0;
padding:0 10px 10px;
}
.ui-sortable h2{
background-color:#555555;
border-top:3px solid #666666;
color:#FFFFD0;
font-size:12px;
margin:0 -10px 10px;
line-height:2em;
padding:0 10px;
}
dl.sort{
color:#222222;
margin:10px 0px;
}
.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}
dl.sort dt{
background-color:#666666;
color:#FFFFFF;
cursor::default;
height:2em; line-height:2em;
padding:0px 6px;
position:relative;
}
dl.sort dd{
background-color:#FFFFD8;
margin:0px;
padding:3px 6px;
border-bottom:1px dotted #999999;
border-left:1px dotted #999999;
border-right:1px dotted #999999;
}
span.options{cursor:pointer; position:absolute; }
.ui-sortable h2 span.options{right:8px; top:8px;position:relative;}
dl.sort dt span.options{right:6px; top:5px;}
#container{float:left;}
#header{width:638px;}
#content{float:left; width:400px;}
#sidebar{float:left; width:200px;}
#footer{width:638px;}
#trashcan{
float:left;
width:150px; height:100px;
background-color:#CCCCCC;
}
#trashcan p{margin:0px;}