how to make a div(black border,and on the google-maps) panel drop-disable,thanks

the black div is used to panel,so it can not be droppable.
alt text
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">

    </head>
<body onload="initialize()" onunload="GUnload()">

<style type="text/css">
*{
    margin:0;
    padding:0;
    }
.container{
    padding:10px;
    width:50px;
    height:50px;
    border:5px solid black;
    }
</style>
<!--<div style="width:100px;height:100px;background:blue;"> </div>-->
<div id="map_canvas" style="width: 500px; height: 300px;"></div>

<!--
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>

-->
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&amp;sensor=false"type="text/javascript"&gt;&lt;/script&gt;

<script type="text/javascript">
var aFn;
//**********
function initialize() {
      if (GBrowserIsCompatible()) {

//************
function a() {
}
a.prototype = new GControl();
a.prototype.initialize = function(map) {
    var container = document.createElement("div");
    var a='';
    for(i=0;i<5;i++){
        a+='<div class=b style="width: 20px; height: 20px;background:red;position:absolute;"></div>'
        }
    $(container).addClass('container');
    $(container).droppable( 'destroy' ).css('z-index','2700')
  $(map.getContainer()).append($(container).append(a));
  return container;
}
a.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

//************
        var map = new GMap2(document.getElementById("map_canvas"));
        map.addControl(new a());
        var center=new GLatLng(39.9493, 116.3975);
        map.setCenter(center, 13);


aFn=function(x,y){

            var point =new GPoint(x,y)
            point = map.fromContainerPixelToLatLng(point);
            //console.log(point.x+"   "+point.y)
            map.addOverlay(new GMarker(point));




    }
$(".b").draggable({});
$("#map_canvas").droppable({
drop: function(event,ui) {
    //console.log(ui.offset.left+'   '+ui.offset.top)
    aFn(ui.offset.left+10,ui.offset.top+10);
    ui.draggable.remove();
    }
});
}
}
//*************



</script>
</body>
</html>
ansaurus

tags:

views:

answers:

how to make a div(black border,and on the google-maps) panel drop-disable,thanks

related questions
