日期:2014-05-16  浏览次数:20305 次

还是js的问题 这个有点难度。。


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;}