드래그는 매우 멋진 것입니다. 물체를 클릭하고 마우스를 누르고 마우스를 다른 영역으로 이동 한 다음 마우스 버튼을 놓아 여기에 객체를 놓습니다.
간단한 사례는 다음과 같습니다.
HTML 파트 : 드래그 요소를 절대적으로 정의해야합니다. 즉, 위치 = 절대입니다.
코드 사본은 다음과 같습니다. <div style = "위치 : 절대; 높이 : 100px; 너비 : 100px; 배경 : 빨간색"> </div>
<script src = "dome.js"> </script>
JS Part (Dome.js) :
var eventUtil = {// 이벤트를 얻고 target getEvent : function (event) {return event? 이벤트 : Window.event; }, getTarget : function (event) {return event.target || event.srcelement; }, // 청취 이벤트 추가 addevent : 함수 (요소, 유형, 핸들러) {if (element.addeventListener) {element.addeventListener (유형, 핸들러, false); } else if (element.attachevent) {element.attachevent ( "on" + type, handler); }}, // 청취 이벤트를 로그 아웃합니다. delevent : function (element, type, handler) {if (element.removeEventListener) {element.removeEventListener (type, handler, false); } else if (element.detachevent) {element.detachevent ( "on" + type, handler); }}} var dragdrop = function () {// DOM 요소가 드래그되는지 여부를 결정하는 플래그 var dragging = null; // DOM 요소의 왼쪽 상단 모서리와 마우스 포인터의 차이는 diffx = 0입니다. diffy = 0; 함수 handleEvent (event) {event = eventutil.getevent (이벤트); var target = eventUtil.getTarget (이벤트); switch (event.type) {case "mousedown": // dom 요소의 클래스에 draggable 속성이 포함되어 있는지 결정합니다. diffx = event.clientx -target.offsetleft; diffy = event.clienty -target.offsetTop; } 부서지다; 사례 "MousEmove": if (dragging! = null) {target.style.left = event.clientx -diffx + "px"; target.style.top = event.clienty -diffy + "px"; } 부서지다; "마우스 업": 드래그 = null; 부서지다; }} return {enable : function () {eventUtil.addevent (문서 ","Mousedown ", HandleEvent); eventUtil.addevent (문서, "mouseMove", handleEvent); eventUtil.addevent (문서, "마우스 업", handleEvent); }, disable : function () {eventUtil.delevent (문서, "mousedown", handleEvent); eventUtil.delevent (문서, "mouseMove", handleEvent); eventUtil.delevent (문서, "마우스 업", handleEvent); }}} (); dragdrop.enable ();여기에 설명해야 할 것은 Diffx와 Diffy이며, 이는 요소의 왼쪽 상단과 마우스 포인터의 차이를 나타냅니다.
diffx = x 마우스의 좌표 - 요소 객체의 오프셋 레프트
diffy = y 마우스의 좌표 - 요소 객체의 오프셋 탑
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.