나는 오늘 조금 행복하다. CSDN 블로그에는 10,000 개가 넘는 조회수가 있습니다. 나는 과거에 많은 수의 견해를 가지고 있지 않았습니다. 나는 여전히 너무 자주 소박하다고 말해야하지만,이 격려를 볼 때 여전히 도움이 될 수는 없지만 행복 할 수는 없습니다. 적어도 이것은 나를 업계의 사람처럼 느끼게합니다. 나는 혼자가 아닙니다.
더 이상 고민하지 않고 오늘의 녹음을 계속하고, 재생 드래그 마크를 녹음하고, 프로세스에서 분석하십시오.
1. 드래그 마크를 재생하려면 먼저 기록해야합니다.
2. 드래그 흔적을 기록하려면 드래그가 구현되어야합니다.
이 문제는 며칠 전에 이루어졌으며 당시에는 약간 결함이 있었지만 일반 구현 방법은 분명 했으므로 오늘 저는이 문제를 훨씬 더 빨리 깨달았습니다. 나는 정말로 행복했다. 오늘 다시 실현 한 후, 나는 그것을 조금 더 깊이 이해 했으므로 오늘 녹음 할 것입니다.
드래그 트레이스 기록을 기록한 경우이 분석은 짧아지며, 결국 한 번 수행했습니다.
1. 절대를 사용하여 드래그하는 데 사용될 수 있도록 DIV의 현재 위치와 상태를 결정하십시오.
2. 마우스 드래그 이벤트를 듣습니다 (어제 요약 된 몇 가지 마우스 이벤트);
3. 해당 마우스 이벤트에 기초하여 해당 응답을 작성하고 OnMouseMove 드래그 앤 드롭에 DIV가 존재하는 지점을 기록하십시오.
4. 마우스 바운스 이벤트를 듣고 드래그 이벤트 및 포인트 레코드를 종료하십시오.
어쨌든 다음 코드를 먼저 구현하겠습니다 (모든 코드는 여기에 동시에 나열되어 나중에 하나씩 분석됩니다) :
HTML 언어 :
<div id = "showzone"> </div> // 이것은 여전히 너무 친숙합니다 <a href = "#"style = "위치 : 절대; 마진-탑 : 100px; 색상 : 옐로우; 배경색 : 빨간색;"> reback </a> // 이것은 앞뒤로 재생됩니다.
JavaScript 부분 :
Window.onload = function () {var obj = document.getElementById ( "showzone"); var disx = disy = 0; var dragif = false; var position = [{x : obj.offsetleft, y : obj.offsettop}]; // 이것은 녹음 및 재생을 구현하는 열쇠이며, 다른 요소는 모두 기본 요소를 얻는 것입니다. obj.onmousedown = function (event) {var event = event || window.event; disx = event.clientx-obj.offsetleft; // 마우스의 거리 거리는 div 경계 disy = event.clienty-obj.offsettop; dragif = true; // 플래그 위치 .push ({x : obj.offsetleft, y : obj.offsettop}); // 레코드는이 시간부터 시작됩니다. }; document.onmouseMove = function (event) {if (! dragif) 반환; //이 판단은 매우 중요합니다. 누적 된 움직임 만 유효한 var event = event || window.event; var nowx = event.clientx-disx; // 위에 기록 된 마우스의 거리에 따라 div와의 거리에 따라 웹 페이지까지의 div의 거리를 알 수 있습니다. var nowy = event.clienty-disy; var maxx = document.documentElement.clientWidth-Obj.offsetWidth; // 이것은 오프셋 var maxy = documentElement.clientHeight-Obj.OffSetheight가 아닌 div의 너비 인 오프셋 위드입니다. nowx = nowx <0? 0 : nowx; // 이러한 판단은 단지 경계가 없다고 판단하는 것입니다. nowy = nowy <0? 0 : nowy; nowx = nowx> maxx? maxx : nowx; nowy = nowy> maxy? maxy : nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = nowx+"px"; // "px"를 잊지 마십시오. Style.left/top은 "px"가있는 obj.style.style.top = nowy+"px"; position.push ({x : nowx, y : nowy}); // record obj.innerhtml = "x :"+nowx+"y :"+nowy; // 직관적으로 거짓을 반환합니다. }; document.onmouseup = function () {dragif = false; // drag and record obj.innerhtml = "x :"+obj.offsetleft+"y :"+obj.offsettop; }; oa.onclick = function () {if (position.length == 1) 반환; // 하나만 있으면 var 타이머가 움직이지 않음을 의미합니다. = setInterVal (function () {var opos = position.pop (); opos? 거짓을 반환합니다. }; };주의를 기울여야 할 몇 가지 핵심 요점이 있습니다.
1. var 위치 배열, 포인트 세트 :이 점은 DIV의 왼쪽 상단에있는 이동 지점입니다.
2. 프로그램에 나타나는 여러 길이 또는 거리 : OffsetLeft, ClientX, OffsetWidth, Style.Left, Document.DocumentElement.ClientWidth 등;
3. 푸시 () 메소드 : 배열 끝에 요소를 추가하고 배열의 길이를 변경하고 끝;
4. pop () 메소드 : 배열의 마지막 요소를 삭제하고 반환합니다. 두 가지 핵심 사항이 있습니다. 하나는 마지막 요소를 반환합니다. 다른 하나 : 요소를 삭제하면 배열의 길이가 작아집니다.
이런 식으로, 우리는 뒤로 재생을 실현 했으므로 구현 원칙을 언급 할 필요가 없습니다. 직접 재생이있는 경우 배열의 첫 번째 값을 얻고 삭제해야합니까? 하하, 쓰고 읽으려고 노력하십시오.
마우스로 드래그하는 것이 더 편안하다고 말해야합니다. 키보드를 이동하기에는 너무 불편합니다. 당신은 마우스를 부도덕하게 끌고 드래그 할 수 있습니다 ... 하늘은 이미 멍청하고 뜨거울 것입니다. 그러나 오늘은 괜찮습니다 ...