HTML5 Drag and Drop - Карта

Question

Мне нужно составить карту Европы со своими странами, а затем мне нужно несколько фотографий продуктов из этих стран. После этого мне нужно сопоставить изображение со страной с помощью перетаскивания, если товар был уронен в нужную страну.он должен отправить меня на другую страницу (с дополнительной информацией о продукте), если это не так, он должен показать сообщение, у кого есть идея?Я проверил некоторые базовые возможности перетаскивания, но так как я новичок в html5 и т. Д. И в целом в веб-дизайне, очень трудно сделать это с нуля, спасибо!

РЕДАКТИРОВАТЬ: также используйте только HTML, CSS, JS

Answer 1

Этого можно достичь с помощью MapQuest JavaScript API .Я бы начал с добавления наложения полигонов на карту для каждой страны, цвет можно сделать полностью прозрачным, установив непрозрачность для наложения 0.0.Из каждого оверлея добавьте mouseup прослушиватель событий к каждому оверлею , затем этот прослушиватель событий можно использовать для определения того, что вы перетаскивали в первую очередь.

Для начала перетаскиванияПо функциональности вы можете сделать это самостоятельно или использовать что-то вроде поддержки перетаскиваемого *1012* интерфейса пользователя jQuery, затем вы можете использовать событие dragstop из перетаскиваемого API в сочетании с 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.
        }
    }
});

Вам может потребоваться проверить обработку событий, чтобы убедиться, что правильные события запускаются в правильном порядке, или использовать событие mouseover на объекте наложения.

Примеры кода являются теоретическими и должны помочь вам найти правильное направление.