<div class="codetitle"> <span><a style="CURSOR: pointer" data="75567" class="copybut" id="copybut75567" onclick="doCopy('code75567')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code75567"> <br><!DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3 .org/ 1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <br>< 제목> 드래그 드래그</title> <br><script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> 🎜> <style type="text/css"> <br>*{margin: 0;padding: 0;} <br>#drag{배경: #ccc;height: 200px;width: 300px;text-align : 중앙 ;줄 높이: 200px;위치: 절대;왼쪽: 20px;상단: 20px;} <br></style> <br><body> <br><div id="drag"> <br>드래그도 할 수 있어요! ! <br></div> <br><script type="text/javascript"> <br>//jquery 메소드 드래그<br>/**$(function(){ <br>var move = false; //判断是否被移动 <br>var a = 0; <br>var b = 0; <br>$("#drag").mousedown(function (이벤트){ <br>move = true; <br>a = event.pageX -parseInt($("#drag").css("left")) <br>b = event.pageY -parseInt($ ("#drag").css("top")); <br>}) <br>$(document).mousemove(function(event){ <br>if(move){ <br>var x = 이벤트 .pageX - a; <br>var y = event.pageY - b; <br>$("#drag").css({left: x,top: y}) <br>} <br>}). mouseup(function(){ <br>move = false; <br>}) <br>})**/ <br>//간단한 js 일반 메소드 <br>/**var drag = document.getElementById("drag"); <br>var a = 0; <br>var b = 0; <br>drag.onmousedown = function(event){ <br>var event = event||window.event; <br>a = event.clientX-drag.offsetLeft; <br>b = event.clientY-drag.offsetTop; <br>drag.onmousemove = function(event){ <br>var event = event||window.event; <br>var x = event.clientX - a; <br>var y = event.clientY - b; <br>drag.style.left = x "px"; <br>drag.style.top = y "px"; <br>} <br>document.onmouseup=function(){ <br>drag.onmousemove = null; <br>drag.onmouseup = null; <br>} <br>}**/ <br>//js 객체 지향 메소드 <br>function Drag(obj){ <br>this.drag = document.getElementById(obj) <br>/ / 경고(obj); <br>this.a = 0; <br>this.b = 0; <br>var that = this <br>this.drag.onmousedown = function(event){ <br> mousedown(event); <br>} <br>} <br>Drag.prototype.mousedown = function(event){ <br>var event = event||window.event; -this.drag.offsetLeft; <br>this.b = event.clientY-this.drag.offsetTop; <br>var that = this <br>document.onmousemove=function(event){ <br>that. (이벤트) <br>} <br>document.onmouseup=function(){ <br>that.mouseup() <br>} <br>} <br>Drag.prototype.mousemove = function(이벤트){ <br>var event = event||window.event; <br>var x = event.clientX - this.a; <br>var y = event.clientY - <br>this.drag.style.left = x "px"; <br>this.drag.style.top = y "px"; <br>} <br>Drag.prototype.mouseup=function(){ <br>document.onmousemove = null; document.onmouseup = null; <br>} <br>new Drag("드래그") <br></body> ></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
