지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

javascript_javascript 기술을 사용하여 드래그 앤 드롭하는 방법

PHP中文网
풀어 주다： 2016-05-16 19:28:04
원래의
962명이 탐색했습니다.

Javascript는 DOM 처리 및 웹페이지 효과가 특징입니다. 대부분의 경우 이미지 캐러셀/웹페이지 탭 만들기 등 이 언어의 가장 간단한 기능만 사용합니다. 이 기사에서는 만드는 방법을 보여줍니다. 자신의 웹페이지에 드래그 앤 드롭하세요.

웹사이트에 드래그 앤 드롭 기능을 추가하는 데에는 여러 가지 이유가 있는데, 가장 간단한 이유는 데이터 재구성입니다. 예를 들어, 사용자가 정렬할 일련의 콘텐츠가 있는 경우 사용자는 각 항목을 입력하거나 선택을 통해 선택해야 합니다. 이전 방법의 대안은 끌어서 놓기입니다. 웹사이트에는 사용자가 드래그할 수 있는 탐색 창이 필요할 수도 있습니다! 이 효과는 매우 간단합니다. 왜냐하면 쉽게 얻을 수 있기 때문입니다!

웹 페이지에서 드래그 앤 드롭을 구현하는 것은 실제로 그리 복잡하지 않습니다. 먼저, 마우스 좌표를 알아야 합니다. 둘째, 사용자가 웹 페이지 요소를 클릭하고 드래그한다는 것을 알아야 합니다. 마지막으로 이 요소를 이동해야 합니다. 

<SCRIPT 
      src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop.js" 
      type=text/javascript></SCRIPT>
<STYLE type=text/css>LI {
 MARGIN-BOTTOM: 10px
}
OL {
 MARGIN-TOP: 5px
}
.DragContainer {
 BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
 BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
 BACKGROUND-COLOR: #eee
}
.DragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
 BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
 BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
 FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
 FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
 FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
 BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
 FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
PRE {
 BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0
}
</STYLE>
<body>
<FIELDSET id=Demo4><LEGEND>样例- 拖拽页面元素</LEGEND>
      <DIV>
      <DIV class=DragContainer id=DragContainer4 overclass="OverDragContainer">
      <DIV class=DragBox id=Item1 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #1</DIV>
      <DIV class=DragBox id=Item2 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #2</DIV>
      <DIV class=DragBox id=Item3 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #3</DIV>
      <DIV class=DragBox id=Item4 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #4</DIV></DIV>
      <DIV class=DragContainer id=DragContainer5 overclass="OverDragContainer">
      <DIV class=DragBox id=Item5 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #5</DIV>
      <DIV class=DragBox id=Item6 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #6</DIV>
      <DIV class=DragBox id=Item7 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #7</DIV>
      <DIV class=DragBox id=Item8 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #8</DIV></DIV>
      <DIV class=DragContainer id=DragContainer6 overclass="OverDragContainer">
      <DIV class=DragBox id=Item9 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #9</DIV>
      <DIV class=DragBox id=Item10 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #10</DIV>
      <DIV class=DragBox id=Item11 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #11</DIV>
      <DIV class=DragBox id=Item12 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #12</DIV></DIV></DIV></FIELDSET>
</body>
</html>
로그인 후 복사

마우스 움직임 정보 얻기

먼저 마우스 좌표를 얻어야 합니다. document.onmousemove에 사용자 함수를 추가하기만 하면 됩니다. 

document.onmousemove = mouseMove;

function mouseMove(ev){
 ev           = ev || window.event;
 var 
mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
 if(ev.pageX || ev.pageY){
  return 
{x:ev.pageX, y:ev.pageY};
 }
 return {
  x:ev.clientX + 
document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + 
document.body.scrollTop  - document.body.clientTop
 };
}
로그인 후 복사
<script> 

function mouseMove(ev){ 
    ev           = ev || window.event; 
    var mousePos = mouseCoords(ev); 
        document.getElementById(&#39;xxx&#39;).value = mousePos.x; 
        document.getElementById(&#39;yyy&#39;).value = mousePos.y; 
} 

function mouseCoords(ev){ 
    if(ev.pageX || ev.pageY){ 
        return {x:ev.pageX, y:ev.pageY}; 
    } 
    return { 
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop 
    }; 
} 

document.onmousemove = mouseMove; 
</script>Mouse X Position: 
<input id=xxx type=text> 

Mouse Y Position: 
<input id=yyy type=text> 

</body> 
</html>
로그인 후 복사

먼저 evnet 개체를 선언해야 합니다. 마우스를 움직이거나, 클릭하거나, 버튼을 누를 때마다 이에 해당하는 이벤트가 발생합니다. Internet Explorer에서 이벤트는 전역 변수이며 window.event에 저장됩니다. Firefox 또는 기타 브라우저에서는 해당 사용자 정의 기능을 통해 이벤트 이벤트를 가져옵니다. document.onmousemove에 mouseMove 함수를 할당하면 mouseMove는 마우스 이동 이벤트를 획득합니다.​

(ev = ev || window.event) 이를 통해 ev는 모든 브라우저에서 이벤트 이벤트를 얻을 수 있습니다. Firefox에서는 ev에 이미 할당된 값이 있으므로 "||window.event"가 작동하지 않습니다. MSIE에서는 ev가 비어 있으므로 ev는 window.event로 설정됩니다.

이 기사에서는 마우스 좌표를 여러 번 얻어야 하기 때문에 이벤트라는 하나의 매개변수만 포함하는 mouseCoords 함수를 설계했습니다.

MSIE, Firefox 등 다른 브라우저에서 실행해야 합니다. Firefox는 문서의 왼쪽 상단 모서리에 해당하는 마우스 위치를 나타내기 위해 event.pageX 및 event.pageY를 ​​사용합니다. 500*500 창이 있고 마우스가 중앙에 있으면 paegX와 pageY는 250이 됩니다. 페이지를 500px 아래로 스크롤하면 pageY는 750이 됩니다. 이때 pageX는 변경되지 않고 여전히 250입니다.

MSIE는 이와 반대입니다. MSIE는 문서가 아닌 마우스와 IE 창의 위치를 ​​나타내기 위해 event.clientX와 event.clientY를 사용합니다. 500*500 창이 있고 마우스가 중앙에 있으면 clientX와 clientY도 250입니다. 창을 수직으로 어떤 위치로 스크롤해도 clientY는 여전히 250입니다. 왜냐하면 상대 창은 변경되지 않았기 때문입니다. 올바른 결과를 얻으려면 문서의 마우스 위치를 기준으로 하는 scrollLeft 및 scrollTop 속성을 추가해야 합니다. 마지막으로 MSIE에는 문서 시작 위치 0,0이 없으므로 일반적으로 테두리 너비가 document.body.clientLeft 및 clientTop의 두 속성에 포함됩니다. 마우스 위치.

다행히 mouseCoords 기능이 완성되어 더 이상 좌표에 대해 걱정할 필요가 없습니다.

마우스 클릭 캡처

다음에는 마우스를 언제 클릭하고 떼는지 알아보겠습니다. 이 단계를 건너뛰면 드래그할 때 마우스가 무엇을 하는지 전혀 알 수 없으므로 짜증나고 직관에 어긋납니다.

여기에 도움이 되는 두 가지 함수가 있습니다: onmousedown과 onmouseup. 우리는 document.onmousemove를 받도록 함수를 미리 설정했기 때문에 document.onmousedown과 document.onmouseup을 받는 것처럼 보입니다. 하지만 document.onmousedown을 얻으면 텍스트, 이미지, 테이블 등과 같은 모든 개체의 클릭 속성도 얻게 됩니다. 우리는 드래그해야 하는 속성만 얻으려고 하므로 ．우리가 움직여야 할 물건들. 

<base href=&#39;http://www.blueidea.com&#39;>
<script> 
function mouseDown(ev){ 
    ev         = ev || window.event; 
    var target = ev.target || ev.srcElement; 

    if(target.onmousedown || target.getAttribute(&#39;DragObj&#39;)){ 
        return false; 
    } 
} 

function makeClickable(item){ 
    if(!item) return; 
    item.onmousedown = function(ev){ 
        document.getElementById(&#39;ClickImage&#39;).value = this.name; 
    } 
} 
document.onmousedown = mouseDown; 
window.onload = function(){ 
    makeClickable(document.getElementById(&#39;ClickImage1&#39;)); 
    makeClickable(document.getElementById(&#39;ClickImage2&#39;)); 
    makeClickable(document.getElementById(&#39;ClickImage3&#39;)); 
    makeClickable(document.getElementById(&#39;ClickImage4&#39;)); 
}</script> 

<FIELDSET id=Demo3> 
<h3> 
  Demo - Click any image 
</h3> 
<IMG id=ClickImage1  
src="/articleimg/2006/07/3791/drag_drop_spade.gif"  
name=Spade><IMG id=ClickImage2  
src="/articleimg/2006/07/3791/drag_drop_heart.gif"  
name=Heart><IMG id=ClickImage3  
src="/articleimg/2006/07/3791/drag_drop_diamond.gif"  
name=Diamond><IMG id=ClickImage4  
src="/articleimg/2006/07/3791/drag_drop_club.gif" 
 name=Club>  

You clicked on: <INPUT id=ClickImage type="text"> </FIELDSET>
로그인 후 복사

요소 이동

우리는 마우스 움직임과 클릭을 캡처하는 방법을 알고 있습니다. 남은 것은 요소를 이동하는 것뿐입니다. 우선, 명확한 페이지 위치를 결정하려면 CSS 스타일 시트에서 '절대'를 사용해야 합니다. 요소의 절대 위치를 설정한다는 것은 스타일 시트의 .top 및 .left를 사용하여 위치를 지정할 수 있다는 의미입니다. 상대 위치를 사용하여 위치를 지정합니다. 이를 바탕으로 페이지의 왼쪽 상단을 기준으로 마우스를 이동하면 다음 단계로 진행할 수 있습니다.

item.style.position='absolute'를 정의하면 모든 연산은 왼쪽 좌표와 위쪽 좌표를 변경한 후 이동합니다.


document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
ev = ev || window.event;

var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
var left = 0;
var top = 0;

while(e.offsetParent){
왼쪽 = e.offsetLeft;
위쪽 = e.offsetTop;
e = e.offsetParent;
}

 left = e.offsetLeft;
 top  = e.offsetTop;

 return {x:left, y:top};
}

function mouseMove(ev) {
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);

 if(dragObject){
  dragObject.style.position = 'absolute';
  dragObject.style.top      = mousePos.y - mouseOffset.y;
  dragObject.style.left     = mousePos.x - mouseOffset.x;

  return false;
 }
}
function mouseUp(){
 dragObject = null;
}

function makeDraggable(item){
 if(!item) return;
 item.onmousedown = function(ev){
  dragObject  = this;
  mouseOffset = getMouseOffset(this, ev);
  return 거짓;
 }
}


관련 라벨：
怎么用javascript进行拖拽
원천：php.cn
이전 기사：2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법 다음 기사：웹페이지 및 키보드_자바스크립트 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
index.html 및 index.php를 로드하도록 아파치를 구성하는 방법은 무엇입니까? 의심스러운 점은 다음과 같습니다. root/index.html root/api/index.php 내장된 PHP 서버를 사용하여 코딩했기 때문에 php-Slocal...
에서 2024-04-05 09:27:53
0
1
3505
정규식을 사용하여 HTML에서 단어 계산 이것은 이것과 같은 문제입니다. 하지만 저는 자바스크립트를 사용하지 않기 때문에 "innerText"는 제게는 해결책이 아니며 정규 표현식이 /...
에서 2024-04-01 22:44:06
0
1
416
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿