HTML5ドラッグアンドドロップ - 地図

Question

ヨーロッパとその国の地図を作成する必要があります。 その後、それらの国からいくつかの写真が必要です その後、ドラッグアンドドロップで国と写真を一致させる必要があります 製品が正しい国に落とされた場合は、私に別のページ（製品に関する詳細情報）を送ってください。 間違っているとメッセージが表示されるはずです 誰かがアイデアを持っていますか？いくつかの基本的なドラッグ＆ドロップの項目をチェックしましたが、html5やwebdesignの新機能から、これをゼロから作るのは本当に難しいです。 ありがとう！

EDIT：また、唯一これはMapQuest JavaScript APIで達成することができるHTML、CSS、JS

Answer 1

を使用しています。私が始めようとしたのはadding polygon overlaysで、各国の地図には、オーバーレイの不透明度を0.0に設定することで、色を完全に透明にすることができます。それぞれのオーバーレイadd a mouseup event listener to each overlayから、このイベントリスナーを使用して、最初にドラッグしていたものを特定できます。自分自身やあなたがjQuery UI draggableサポートのようなものを使用することができますが、このどちらか、あなたは、あなたのロジックを実行するために、オーバーレイにmouseupと一緒にドラッグ可能なAPIからdragstopイベントを使用することができないことができ、ドラッグ開始機能については

。

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イベントを使用することができます。

コードサンプルは理論的なものであり、正しい方向を見つけるのに役立ちます。