Question

我必须与其国家制作欧洲地图然后我需要从这些国家的一些产品图片之后，我必须通过拖放将图片与国家匹配如果产品掉落在正确的国家/地区，它应该将我发送到另一个页面（有关产品的更多信息）如果它是错的，它应该显示一条消息有谁有想法？我检查了一些基本的拖放东西，但因为我是html5等新手和一般的网页设计，所以从头开始很难做到这一点谢谢！

编辑：也只使用HTML，CSS，JS

Answer 1

这可以通过MapQuest JavaScript API来实现。我开始的是adding polygon overlays到每个国家/地区的地图，通过将叠加层的不透明度设置为0.0，可以将颜色设置为完全透明。从每个叠加层add a mouseup event listener to each overlay开始，此事件侦听器可用于确定您首先拖动的内容。

对于拖动启动功能，您可以自己执行此操作，也可以使用jQuery UI draggable支持之类的功能，然后可以使用可拖动API中的dragstop事件与{{1}一起使用在叠加层上执行你的逻辑。

Check out the basic map to get a map going

一些以

开头的代码

mouseup

用于拖动开始。

var countryCode;

// Adds an overlay and wires an event for mouseup.
function addMapOverlay(points, cc) {
    var poly = new MQA.PolygonOverlay();
    poly.setShapePoints(points);
    poly.color = "#ffffff";
    poly.colorAlpha=0.0;
    poly.fillColor = "#ffffff";
    poly.fillColorAlpha=0.0;
    poly.addListener(rectangle, 'mouseup', function(evt) {
        if (evt.eventName === "mouseup") {
            // Here you have the event firing for the mouse-up on the overlay.
            countryCode = cc;
        }
    });
}

您可能需要测试事件处理以确保以正确的顺序触发正确的事件，或者在覆盖对象上使用$("#some-country-item").draggable({ start: function(event, ui) { countryCode = null; }, stop: function(event, ui) { if (countryCode === "what you expected") { // Released on correct country. } else { // Did not release on correct country. } } });事件。

代码示例是理论上的，应该可以帮助您找到正确的方向。

HTML5拖放 - 地图

1 个答案: