HTML5 Drag и Drop - Карта

Question

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

EDIT: также использовать только HTML, CSS, JS

Answer 1

Это может быть достигнуто с MapQuest JavaScript API. Я бы начал с adding polygon overlays на карте для каждой страны, цвет можно установить на полностью прозрачный, установив непрозрачность для наложения на 0.0. С каждого наложения add a mouseup event listener to each overlay этот прослушиватель событий может быть использован для определения того, что именно вы перетаскивали в первую очередь.

Для функциональности запуска перетаскивания вы можете сделать это самостоятельно или вы могли бы использовать что-то вроде поддержки jQuery UI draggable, вы могли бы использовать dragstop событие из перетаскиваемого API в сочетании с mouseup на накладке для выполнения вашей логики.

Check out the basic map to get a map going.

Некоторый код, чтобы начать с

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 событие на объекте наложения события.

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