Prevent disabling of google map and only disabling the droppable

I am working on GPS based product and what I exactly want to do is :

1) Drag a item on the div(droppable)

2) On drop action I'll display a map in the same div and mark information accordingly.

3) The dropable functionality should be switched off for that particular div.

Problem: All is working fine except the disabling of droppable functionality. I tried to disable the droppable, but it is actually disabling the div container due to which the MAP is being grayed out, which is not acceptable at all.

Please Help.. :( Here is My Code:

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:

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

Answers


Instead of disabling the drop functionality. Try the following:

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

Example:

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


Need Your Help

Record a video automatically for 15 secs and save it to directory

iphone ios video

I want to record a video from my iphone device automatically when i press a button and after recording for 15 secs the video should stop and i want to save the video to the directory.

Convert const wchar_t* to const char*

windows visual-c++

I am trying to use GetHostByName() this requires a const char*. I have my URL in a variable that is in a cost wchar_t* format. How can I convert this so that GetHostByName may use it? The code.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.