matoski.com

How to implement a draggable popup in OpenLayers, to have the ability to decide which class will be draggable and which one will not be?

For a project I needed to be able to drag the OpenLayer popups, the problem was there were some implementations online, but I needed for the popup to be only draggable on the title, and for input elements not to interfere with the dragging process. Becase when I clicked on an input, textarea it suddenly stared dragging and it was a mess.

So the solution was to implement a control that will do all that for me.

The solution I came up was this, you can see the file on GitHub on OpenLayers.Control.DragPopup.js, the plugin requires Underscore and jQuery to work, when I have time I will rewrite them to be pure JavaScript only, but for now it works without any problems.

Let’s see some of the available options:

• elementsIgnore

  Which html elements should we ignore for dragging, this is useful so we don’t accidentally drag the popup on some of the elements inside the popup, like input elements.

• selectorsIgnore

  Which selectors do we ignore, this is an array that is used to check if we should move the element or not.

• moveOnSelector

  On which selector do we move, this can be a title or an icon, and we use this to determine if we should move or not.

To view a demo implementation, you can open this jsfiddle