OpenLayers Draggable Popup

by ilijamt

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>
<button class="popupadd" data-type="OpenLayers.Popup">Add popup</button>
<div id="map" style="width:740px; height:680px;"></div>

CSS

h2 {
    clear: both;
    background-color: lime;
    width: 95%;
    margin-top: -3px;
}
h2:hover {
    cursor: move;
}

JavaScript

require.config({
    paths: {
        'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
            'openlayers': 'http://openlayers.org/dev/OpenLayers',
            'openlayers-drag': 'http://gist.github.com/ilijamt/6667845/raw/eaebb681c139306fed7650cd99b0b0dd3fef8661/OpenLayers-DragPopup',
    },
    shim: {
        'underscore': {
            exports: '_'
        },
            'openlayers': {
            "exports": "OpenLayers"
        },
            'openlayers-drag': {
            deps: ['underscore', 'openlayers'],
        },
    }
});

require(['underscore', 'openlayers', 'openlayers-drag'], function (_, OpenLayers) {

    var addPopup = function (type) {

        var popup = OpenLayers.Popup;

        type = _.isUndefined(type) ? 'OpenLayers.Popup' : type;

        switch (type) {
            case 'OpenLayers.Popup.Framed':
            case 'OpenLayers.Popup.FramedCloud':
                popup = OpenLayers.Popup[type.replace("OpenLayers.Popup.", "")];
                break;
            case 'OpenLayers.Popup':
            default:
                popup = OpenLayers.Popup;
                break;
        }

        var id = new Date().getTime() + "",
            centerLonLat = new OpenLayers.LonLat(0, 0),
            html = "<h2 class='dragMeClass'>Title (DragMe)</h2><p>Popup ID: " + id + "</p>";

        return new popup(
        id,
        centerLonLat,
        new OpenLayers.Size(200, 200),
        html,
        true, function (evt) {
            console.log(evt);
        });
    };

    var popups = [],
        options = {
            div: "map",
            layers: [new OpenLayers.Layer.OSM()]
        }, map = new OpenLayers.Map(options);

    map.zoomToMaxExtent();

    $(".popupadd").click(function (evt) {
        var type = $(this).data('type');
        var popup = addPopup(type);
        var dragControl = new OpenLayers.Control.DragPopup(popup);
        dragControl.setMoveSelector(".dragMeClass");
       ...