정확히 내가 원하는 것을 설명하는 방법을 모르겠다. (이는 또한 Google에서 실제로 어렵다), 각 셀에 특정 너비의 테이블을 만들고 싶다. 높이 (40x40 픽셀이라고 가정 해 봅시다).draggable 테이블을 포함하는 HTML 전체 크기 div
이 테이블은 뷰포트보다 크기 때문에 일부 스크롤이 필요하지만 스크롤바를 원하지 않습니다 (이 부분은 문제가되지 않음). 그러나 뷰포트 뒤의 테이블을 드래그하는 방법 ".
좀 더 복잡하게 만들려면 특정 셀을 가운데에 맞출 수 있어야하고 어떤 셀도 가운데에 배치되어 있어야합니다. (예를 들어 테이블이 왼쪽에 있음을 알고 있더라도 -520px, 상황은).
간단히 말해서 maps.google.com처럼 보이고 작동하지만 캔버스 나 div가 아닌 표와 셀을 사용합니다.
달성하려는 목표는 비교적 간단합니다. CSS를 통해 적용한 position: relative; overflow: hidden의 컨테이너 div 요소가 있고 콘텐츠는 position: absolute으로 설정되어 있습니다. 예를 들면 :
<div class="wrapper">
<div class="content-grid">
... your grid HTML ...
</div>
</div>
그런 다음, 당신이 mousedown 또는 touchstart 이벤트 다음 시험에서 마우스의 위치를 모니터링 스택 오버플로 또는 Google, 주위의 많은 예를 찾을 수 있습니다/몇 가지 마우스를 설정 자바 스크립트를 추적 터치 필요 포인터가있는 곳을 확인하고 mouseup 또는 touchend까지 content-grid 위쪽과 왼쪽 위치를 업데이트하려면이 간격을 반복적으로 사용하십시오.
왼쪽과 위쪽의 CSS 전환을 사용하여이 애니메이션을 부드럽게 만들 수 있습니다.
까다로운 비트가 중앙 셀의 위치를 계산 중입니다. 이를 위해 컨테이너 요소 중간에 표 셀 (예 : 40x40)의 크기 인 중앙 구역을 계산하는 것이 좋습니다. 그런 다음 격자 셀이 현재 해당 구역 내부에 1/4 이상 있는지 확인하고이를 "중앙"요소로 처리합니다. https://jsfiddle.net/tawt430e/1/
희망하는 데 도움이 :
여기에 래퍼 내에서 그리드 내에서 셀 위치에 대한 기본 예제입니다!
처음에는 내 질문의 투표를보기가 약간 실망했습니다. Stackoverflow는 새로운 사람들이 여기에 코드를 작성하려고 할 때 많은 문제가 있다고 생각할 수 있습니다.하지만 그건 내가 묻는 것이 아닙니다.
어쨌든 "문제를 공유하면 솔루션을 공유합니다"라고 생각하면 tw_hoff의 도움으로 코드가 수정되어 이제는 모두 작동합니다. 로컬 스토리지에 좌표를 저장하기 때문에 페이지를 새로 고치면이 예제 HTML이 같은 위치에있게됩니다. 나는 두 개의 예제 이미지를 추가했다. (왼쪽 하나는 farm.png, 오른쪽은 tile.png, html 페이지와 같은 디렉토리에 저장한다.)
실제 코드 :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game map demo</title>
<style>
body { margin: 0; padding: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="map" style="position: absolute; overflow: hidden; width: 100%; height: 100%; background-color: darkgreen;">
<div id="content" style="white-space: nowrap;">
</div>
</div>
<script>
for(i = 0; i < 20; i++) {
for(j = 0; j < 20; j++) {
var tile;
if((i == 4 || i == 5) && (j == 2 || j == 3)) {
tile = 'farm';
} else {
tile = 'tile';
}
$("#content").append('<div style="background: url(\'' + tile + '.png\'); width: 128px; height: 128px; position: absolute; margin-left: ' + (i * 128) + 'px; margin-top: ' + (j * 128) + 'px;"></div>');
}
}
$("body").css("-webkit-user-select","none");
$("body").css("-moz-user-select","none");
$("body").css("-ms-user-select","none");
$("body").css("-o-user-select","none");
$("body").css("user-select","none");
var down = false;
var current_left = 0;
var current_top = 0;
if(localStorage.getItem("current_left") && localStorage.getItem("current_top")) {
current_left = Number(localStorage.getItem("current_left"));
current_top = Number(localStorage.getItem("current_top"));
console.log(current_left);
$("#content").css('marginLeft', (current_left) + 'px');
$("#content").css('marginTop', (current_top) + 'px');
}
$(document).mousedown(function() {
down = true;
}).mouseup(function() {
down = false;
});
var cache_pageX;
var cache_pageY;
$("#map").mousemove(function(event) {
if(down == true) {
current_left += (-1 * (cache_pageX - event.pageX));
if(current_left > 0)
current_left = 0;
if(current_left < (-2560 + $("#map").width()))
current_left = (-2560 + $("#map").width());
current_top += (-1 * (cache_pageY - event.pageY));
if(current_top > 0)
current_top = 0;
if(current_top < (-2560 + $("#map").height()))
current_top = (-2560 + $("#map").height());
localStorage.setItem("current_left", current_left);
localStorage.setItem("current_top", current_top);
$("#content").css('marginLeft', (current_left) + 'px');
$("#content").css('marginTop', (current_top) + 'px');
}
cache_pageX = event.pageX;
cache_pageY = event.pageY;
});
</script>
</body>
</html>
, 그것은 여전히 몇 가지 작업을 필요로하고 작업 물론 많은 실제로 게임에서 사용할 수 있지만이 부분 작품과 나는 경우 희망 다른 사람이 이제까지 같은 문제가있을 수 있습니다 stackoverflow 내 솔루션에 대한 그들에게 올바른 방향으로 밀어 준다 :).
도움을 주신 분께 감사드립니다.
샘플 코드가 없으면 도움이되지 않습니다. – Oen44
코드는 없으므로 실제로는 코드 샘플이 없습니다. 나는 작동 할 수있는 개념을 찾으려고 노력하고있다. 그런 다음 코드를 작성할 것이다. (필자는 누군가 내 코드를 작성하지 않을 것이라고 기대한다.) 나는 어디서부터 시작해야하는지 전혀 모른다. –
이 질문은 스택 오버플로에 너무 광범위하다고 생각합니다. 일반적으로 당신은 당신 자신이 뭔가를 시도하고 붙어있을 때 특정한 질문을해야합니다 ... – Badacadabra