Transmettre l'événement de glisser de la couche div vers la couche mapbox

Question

Voici un jsfiddle https://jsfiddle.net/jes4fggd/. Je veux déplacer la carte, mais comme la div suit le pointeur de la souris ressemble à l'événement est attrapé par div. Je veux passer cet événement à la carte lorsque la souris est sur le div ou les boutons. Je veux seulement que l'événement de clic soit disponible pour les boutons mais que le drag soit pour la carte. J'ai essayé d'utiliser voteDiv1.style ['pointer-events'] = 'none'; mais c'est un peu difficile pour moi. Y a-t-il un moyen simple? Merci.

var voteDiv1 = document.getElementById('vote1'); 
map.on('mousemove', function (e) { 
    var c = map.project(e.lngLat); 
    console.log(c) 
    voteDiv1.style.left = (c.x) -50 + 'px'; 
    voteDiv1.style.top = (c.y) -50 + 'px'; 
}); 

et un autre exemple https://jsfiddle.net/q3ghvuu3/ - comment déplacer une carte ou cliquez sur un bouton de cette façon?

Answer 1

Confus au sujet de ce que vous allez pour partir de la description, mais voici ma meilleure estimation:

• Cliquez sur la carte devrait glisser la carte comme prévu
• En cliquant sur le bouton doit cliquer sur le bouton comme prévu
• Déplacement du curseur sur la carte devrait déplacer le bouton sur la carte
• Faire glisser la souris sur le bouton devrait glisser la carte (non prévu par la plupart des utilisateurs)

Je vais réitérer mes préoccupations initiales que cette interface utilisateur est une mauvaise idée. Les utilisateurs sont habitués à voir les boutons superposés sur les cartes, comme les boutons de zoom sur Google Maps, et savent que pour faire glisser la carte, ils cliquent n'importe où mais les boutons. Donc, je recommande encore de ne pas le faire. Mais c'est ici.

Pour ce faire, nous allons ajouter pointer-events: none à l'élément button. De cette façon, tous les clics et les traînées passent par la carte. Nous vérifions ensuite l'emplacement du clic pour voir si cela s'est passé au même endroit que le bouton, et si oui, envoyez un événement click au bouton.

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZGVybGlvIiwiYSI6ImNqM29qdXR5djAwMTQzM214M2hnZWVycWsifQ.jtDIyytOGMJ0TS9Pp6zFVg'; 
 
var map = new mapboxgl.Map({ 
 
    container: 'map', // container id 
 
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location 
 
    center: [-74.50, 40], 
 
    zoom: 9 // starting zoom 
 
}); 
 

 
var voteDiv1 = document.getElementById('vote1'); 
 
map.on('mousemove', function(e) { 
 
    var c = map.project(e.lngLat); 
 
    voteDiv1.style.left = (c.x) - 50 + 'px'; 
 
    voteDiv1.style.top = (c.y) - 50 + 'px'; 
 
}); 
 

 
document.getElementById("plus").addEventListener("click", function() { 
 
    alert("Plus clicked") 
 
}) 
 

 
document.getElementById("map").addEventListener("click", function(event) { 
 
    var button = document.getElementById("plus"); 
 
    var buttonBB = button.getBoundingClientRect(); 
 

 
    if (
 
    event.pageX > buttonBB.left && 
 
    event.pageX < buttonBB.right && 
 
    event.pageY > buttonBB.top && 
 
    event.pageY < buttonBB.bottom 
 
) { 
 
    var bottomEvent = new Event("click"); 
 
    bottomEvent.pageX = event.pageX; 
 
    bottomEvent.pageY = event.pageY; 
 

 
    button.dispatchEvent(bottomEvent); 
 
    } 
 
    
 
    
 
})

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#map { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
#vote1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 2px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    pointer-events: none; 
 
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css" rel="stylesheet" /> 
 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js"></script> 
 

 
<div id='map'></div> 
 

 
<div id="vote1"> 
 
    <div id="box" sectionId="" style="border:1px solid blue;"> 
 
    <button id="plus" style="width:150px; height:150px">+</button> 
 
    </div> 
 
</div>