웹 페이지에서 버튼을 클릭하면 사용자 정의 창이 팝업되고 드래그 앤 드롭하여 위치를 변경할 수 있는 경우를 자주 볼 수 있습니다. jquery를 사용하여 드래그 앤 드롭을 구현하려면 jquery 파일이 있어야 합니다. 구현 단계: 1. jquery 파일 가져오기 2. js 스크립트 작성 특정 코드: html 코드: 🎜>코드 복사 코드는 다음과 같습니다. show 🎜 > X 코드 복사 코드는 다음과 같습니다. 500px;높이:600px;배경:#000000;border-radius:8px;box-shadow:0px 0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0; display:none} </a>. 승리 .wTop{높이:30px;너비:100%;커서:이동} </span>.win .content{높이:570px;너비:100%;border-radius:5px;배경: 흰색} </div></ style> <div class="codebody" id="code48592"> <br> <br>js 스크립트: <br><br><br><br> </div>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다.<span><a style="CURSOR: pointer" data="26566" class="copybut" id="copybut26566" onclick="doCopy('code26566')"> <u><script 언어="javascript" type="text/javascript"> </u>$(function(){ </a>//Drag</span>dragAndDrop(); </div>//초기화 position<div class="codebody" id="code26566">initPosition(); <br>//버튼 클릭<br>clickShowBtn(); <br>}) <br>//Drag<br>function dragAndDrop(){ <br>var _move=false; //표시 이동<br>var _x,_y;//컨트롤 왼쪽 상단에서 마우스의 상대적 위치<br>$(".wTop").mousedown(function(e){ <br> _move =true; <br>_x=e.pageX-parseInt($(".win").css("left")) <br>_y=e.pageY-parseInt($(".win").css ("top")); <br>//$(".wTop").fadeTo(20,0.5);//드래그를 시작하고 투명하게 표시하려면 클릭하세요.<br>}) <br>$(document) . mousemove(function(e){ <br>if(_move){ <br>var x=e.pageX-_x;//마우스 위치는 이동할 때 컨트롤의 왼쪽 상단 모서리의 절대 위치를 계산합니다. <br>var y=e.pageY -_y; <br>$(".win").css({top:y,left:x});//컨트롤의 새 위치 <br>} <br>}).mouseup (function(){ <br>_move=false; <br>//$(".wTop").fadeTo("fast",1);//마우스 버튼을 놓으면 이동을 멈추고 불투명하게 돌아갑니다<br> }); <br>} <br>//드래그된 div의 위치 초기화<br>function initPosition(){ <br>//초기 위치 계산<br>var itop=($(document).height( )-$(".win").height())/2; <br>var ileft=($(document).width()-$(".win").width())/1.8; >//드래그된 div의 위치 설정 <br>$(".win").css({top:itop,left:ileft}) <br>} <br>//표시 버튼 클릭<br> function clickShowBtn(){ <br>$(" #show").click(function(){ <br>$(".win").show(1000); <br>}); $("#hidden").click(function (){ <br>$(".win").hide(1000); <br>}) <br></script> ><br> <br>js 파일 도입<br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br> </div> <br><script type="text/javascript" src="js/jquery-1.10.2.min.js"><div class="codetitle"></script>
