Cómo: Habilitar la función de arrastrar en un elemento emergente infoWindow en Web AppBuilder for ArcGIS

Resumen

Cuando los usuarios hacen clic en una entidad de un mapa web, el elemento emergente infoWindow está definido para abrirse en la misma posición que el puntero y la ventana emergente se queda fija. Este comportamiento es por diseño. Sin embargo, a veces, esta función puede bloquear otras entidades y alterar la vista.

Las instrucciones proporcionadas describen cómo mover la ventana emergente de Web AppBuilder for ArcGIS arrastrando la ventana con el cursor del ratón. 

Nota: Estas instrucciones son específicas del tema Launchpad.Para utilizar otros temas, actualice las rutas a los archivos common.css y style.css.

Procedimiento

Siga los pasos que se indican a continuación para habilitar la función de arrastrar en ventanas emergentes utilizando el kit de herramientas Dojo designado. Se requieren ediciones en los dos archivos básicos de Web AppBuilder for ArcGIS:

• el archivo common.css que reside en: [app install]\server\apps\[app#]\themes\LaunchpadTheme
• el archivo utils.js en: [app install]\server\apps\[app#]\jimu.js

1. Edite el archivo common.css para insertar la propiedad mover al cursor. El siguiente fragmento de código muestra cómo cambiar el puntero del cursor a un cursor de movimiento para indicar un panel móvil.

@import url("panels/LaunchpadPanel/style.css"); .esriPopupWrapper .title { cursor: move; } .esriPopup .hidden { display: none !important; }

2. En el archivo utils.js, defina el kit de herramientas Dojo designado al inicio del código. La propiedad definir debe tener la siguiente definición Dojo.

define([ ... 'dojo/dnd/Moveable', 'dojo/dom-class', ... ],

3. En el mismo archivo utils.js, busque la sección de código mo.createWebMap y, a continuación, edite la sección de código para incorporar las propiedades Dojo agregadas que fueron establecidas en el paso 2. El siguiente fragmento de código muestra cómo aparece el código tras editarlo.

mo.createWebMap = function(portalUrl, itemId, mapDiv, /* optional */ options) { portalUrl = portalUrlUtils.getStandardPortalUrl(portalUrl); var itemUrl = portalUrlUtils.getBaseItemUrl(portalUrl); arcgisUtils.arcgisUrl = itemUrl; var def = arcgisUtils.createMap(itemId, mapDiv, options); def.then(function (response){ var map = response.map; var handle = query(".title", map.infoWindow.domNode)[0]; var dnd = new Moveable(map.infoWindow.domNode, { handle: handle }); }); return def; };

Información relacionada

• ArcGIS API for JavaScript: Gráficos y ventanas informativas
• Web AppBuilder for ArcGIS (Developer Edition): Utilizar Dojo Dijit
• DOJO: Guía de referencia del kit de herramientas Dojo

Última modificación: 12/4/2020

Id. de artículo: 000015175

Software: Web AppBuilder for ArcGIS 2.9, 2.8, 2.7, 2.6, 2.5, 2.4, 2.3, 2.2, 2.18, 2.17, 2.16, 2.15, 2.14, 2.13, 2.12, 2.11, 2.10, 2.1, 2.0