HTML5拖放 - 地圖

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支持，然後你可以結合mouseup使用dragstop事件從拖動API上的覆蓋來執行你的邏輯。

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事件。

代碼示例是理論上的，應該可以幫助您找到正確的方向。