我正在开发基于GPS的产品,我真正想做的是:
1)拖动div上的项目(droppable)
2)在放下动作时,我将在同一个div中显示一个地图并相应地标记信息。
3)应关闭该特定div的可丢弃功能。
问题: 除了禁用可放置功能外,一切正常。 我试图禁用droppable,但它实际上是禁用了div容器,因为MAP正在变灰,这根本不可接受。
请帮助...... :( 这是我的代码:
HTML:
<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>
JS:
$(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:
.droppable
{
background-color: Gray;
border: solid 1px Red;
}
.draggable
{
background-color: Transparent;
}
FIDDLE:
答案 0 :(得分:1)
而不是禁用掉落功能。请尝试以下方法:
$(this).droppable("option", "disabled", true);
$(this).removeClass('ui-droppable ui-state-highlight ui-droppable-disabled ui-state-disabled');
示例: