Javascript 防止禁用谷歌地图,仅禁用可拖放
我正在开发基于GPS的产品,我真正想做的是: 1) 拖动div上的项目(可拖放) 2) 在drop action中,我将在同一div中显示一张地图,并相应地标记信息 3) 对于该特定div,应关闭可拖放功能 问题: 除禁用可拖放功能外,所有功能均正常工作。 我试图禁用droppable,但实际上它禁用了div容器,由于该容器,映射被灰显,这是完全不可接受的 请帮忙( 这是我的密码: HTML:Javascript 防止禁用谷歌地图,仅禁用可拖放,javascript,jquery,css,google-maps-api-3,Javascript,Jquery,Css,Google Maps Api 3,我正在开发基于GPS的产品,我真正想做的是: 1) 拖动div上的项目(可拖放) 2) 在drop action中,我将在同一div中显示一张地图,并相应地标记信息 3) 对于该特定div,应关闭可拖放功能 问题: 除禁用可拖放功能外,所有功能均正常工作。 我试图禁用droppable,但实际上它禁用了div容器,由于该容器,映射被灰显,这是完全不可接受的 请帮忙( 这是我的密码: HTML: <table width="100%"> <tr>
<table width="100%">
<tr>
<td>
<div style="width: 30%; float: left; height: 500px;">
<span id="bjcb" class="draggable" style="color:Red">What up</span>
</div>
<div style="width: 70%; float: left; height: 500px;">
<div style="width: 49.5%; height: 50%; float: left;" class="droppable" id="one"></div>
<div style="width: 50%; height: 50%; float: right;" class="droppable" id="two"></div>
<div style="width: 49.5%; height: 50%; float: left;" class="droppable" id="three"></div>
<div style="width: 50%; height: 50%; float: right;" class="droppable" id="four"></div>
</div>
</td>
</tr>
</table>
$(function () {
$(".draggable").draggable({
revert: true
});
$(".droppable").droppable({
drop: function (event, ui) {
alert('dropped');
$(this).addClass("ui-state-highlight");
$(this).html(ui.draggable.prop('id'));
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var id = $(this).prop('id');
var map = new google.maps.Map(document.getElementById(id), mapOptions);
$(this).droppable("option", "disabled", true);
}
});
});
CSS:
小提琴:
<table width="100%">
<tr>
<td>
<div style="width: 30%; float: left; height: 500px;">
<span id="bjcb" class="draggable" style="color:Red">What up</span>
</div>
<div style="width: 70%; float: left; height: 500px;">
<div style="width: 49.5%; height: 50%; float: left;" class="droppable" id="one"></div>
<div style="width: 50%; height: 50%; float: right;" class="droppable" id="two"></div>
<div style="width: 49.5%; height: 50%; float: left;" class="droppable" id="three"></div>
<div style="width: 50%; height: 50%; float: right;" class="droppable" id="four"></div>
</div>
</td>
</tr>
</table>
$(function () {
$(".draggable").draggable({
revert: true
});
$(".droppable").droppable({
drop: function (event, ui) {
alert('dropped');
$(this).addClass("ui-state-highlight");
$(this).html(ui.draggable.prop('id'));
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var id = $(this).prop('id');
var map = new google.maps.Map(document.getElementById(id), mapOptions);
$(this).droppable("option", "disabled", true);
}
});
});
不要禁用拖放功能。请尝试以下操作:
$(this).droppable("option", "disabled", true);
$(this).removeClass('ui-droppable ui-state-highlight ui-droppable-disabled ui-state-disabled');
例如:
谢谢。!非常好用。!!:)