HTML5 드래그 앤 드롭 -지도

유럽의지도를 만들려면 을 입력해야합니다. 그런 다음 해당 국가의 제품 사진이 필요합니다. 그 후에 드래그 앤 드롭으로 사진과 일치해야합니다. 제품을 올바른 국가에 떨어 뜨리면 다른 페이지로 보내야합니다 (제품에 대한 자세한 정보가 있음) 메시지가 잘못 표시되면 누구나 아이디어가 있습니까? 몇 가지 기본 끌어서 놓기 물건을 확인했지만 이후 html5 등 새로운 및 webdesign 일반적으로 그것은 스크래치에서 이것을 만드는 것이 어렵습니다. 감사합니다!HTML5 드래그 앤 드롭 -지도

편집 : 또한 단지 HTML, CSS, JS

출처

2012-03-11 Vincent Van Camp

이이 MapQuest JavaScript API 달성 될 수를 사용합니다. 먼저 각 국가의지도에 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 이벤트를 사용하여 이벤트 처리를 시험 할 필요가있을 수있다.

코드 샘플은 이론적이며 사용자가 올바른 방향을 찾을 수 있도록 도와줍니다.

출처

2012-03-11 13:54:15

HTML5 드래그 앤 드롭 -지도

답변

관련 문제