이 기사에서는 텍스트 및 이미지 드래그 앤 드롭 효과를 구현하기위한 JavaScript 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> JavaScript는 텍스트와 그림의 드래그 앤 드롭 효과를 깨닫습니다 </title>
<스타일 유형 = "텍스트/CSS">
*{패딩 : 0; 마진 : 0;}
.tips {위치 : 절대; 배경 : #eee;}
</스타일>
</head>
<body>
<div id = "tips1"onmouseover = "dragf.drag ( 'tips1');">
<img src = "/images/skinslogo.gif"> <br> 이미지를 드래그 할 수 있습니다 </div>
<div id = "tips2"onmouseover = "dragf.drag ( 'tips2');"> <a href = "// www.vevb.com"target = "_ blank"> wulin.com </a> <br/> 드래그 링크도 괜찮습니다.
</div>
</body>
<script type = "text/javaScript">
var $ id = function (id) {return document.getElementById (id);}
var dragf = {
잠긴 : 거짓,
lastobj : 정의되지 않은,
드래그 : 함수 (obj) {
$ id (obj) .onmousedown = function (e) {
var e = e? E : Window.event;
if (! wind
dragf.locked = true;
$ id (obj) .style.position = "절대";
$ id (obj) .style.zindex = "100";
if (dragf.lastobj && dragf.lastobj! = $ id (obj)) {/* 다중 요소 드래그가 마지막 요소 상태를 복원해야합니다*/
dragf.lastobj.style.zindex = "1";
}
dragf.lastobj = $ id (obj);
var tempx = $ id (obj) .offSetLeft;
var tempy = $ id (obj) .offsetTop;
dragf.x = e.clientx;
dragf.y = E.Clienty;
document.onmouseMove = function (e) {
var e = e? E : Window.event;
if (dragf.locked == false) false를 반환합니다.
$ id (obj) .style.left = tempx+e.clientx-dragf.x+"px";
$ id (obj) .style.top = tempy+e.clienty-dragf.y+"px";
if (winde
}
document.onmouseup = function () {
dragf.locked = false;
}
}
}
}
</스크립트>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.