防止禁用谷歌地图并仅禁用可放置答案

【问题标题】：Prevent disabling of google map and only disabling the droppable防止禁用谷歌地图并仅禁用可放置
【发布时间】：2013-04-20 20:27:33
【问题描述】：

我正在开发基于 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;
    }

小提琴：

http://jsfiddle.net/writetobhuwan/LujAv/1/

【问题讨论】：

标签： javascript jquery css google-maps-api-3

【解决方案1】：

而不是禁用放置功能。请尝试以下操作：

$(this).droppable("option", "disabled", true);
$(this).removeClass('ui-droppable ui-state-highlight ui-droppable-disabled ui-state-disabled');

例子：

http://jsfiddle.net/LujAv/8/

【讨论】：

谢谢！完美运行。！！ :)