2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법-JS 튜토리얼-php.cn

Demo - Drag and Drop any item

데모 - 원하는 항목을 드래그 앤 드롭하세요

집

웹 프론트엔드

JS 튜토리얼

2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:28 PM

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

당신 이 코드는 이전 코드의 거의 완전한 모음입니다. 이전 코드를 함께 결합하면 드래그 앤 드롭 효과를 얻을 수 있습니다.

항목을 클릭하면 마우스 위치 등 많은 변수를 얻게 됩니다. 마우스 위치에는 당연히 해당 항목의 좌표 정보가 포함됩니다. 20*20px 이미지의 중앙을 클릭하면 마우스의 상대 좌표는 {x:10,y:10}입니다. 이 이미지의 왼쪽 상단을 클릭하면 마우스의 상대 좌표는 {x:0,y:0}입니다. 클릭하면 이 방법을 사용하여 마우스 및 이미지 보정에 대한 정보를 얻습니다. 페이지 항목을 로드할 수 없는 경우 정보는 문서 정보가 되며 클릭한 항목 정보는 무시됩니다.

mouseOffset 함수는 또 다른 함수인 getPosition을 사용합니다. getPosition의 함수는 item.offsetLeft 또는 item.style.left를 얻으려고 할 때 페이지의 왼쪽 상단을 기준으로 항목의 좌표를 반환하는 것입니다. , 그러면 전체 문서가 아닌 상위 레벨의 위치를 기준으로 항목을 가져옵니다. 모든 스크립트는 전체 문서와 관련이 있으므로 더 좋습니다.

getPosition 작업을 완료하려면 항목의 상위 항목을 루프에서 가져와야 하며 항목의 왼쪽/상단 위치에 콘텐츠를 로드합니다. 원하는 상단 및 좌측 목록을 관리해야 합니다.

mousemove 함수가 정의되어 있으므로 mouseMove는 항상 실행됩니다. 먼저 항목의 style.position이 절대적인지 확인하고 두 번째로 항목을 이전에 정의된 위치로 이동합니다. 마우스 클릭을 놓으면 dragObject가 null로 설정되고 mouseMove는 더 이상 아무 작업도 수행하지 않습니다.

항목 놓기

이전 예제의 목적은 매우 간단합니다. 항목을 원하는 위치로 드래그하는 것입니다. 예를 들어 항목 삭제와 같은 다른 목적이 있는 경우가 많습니다. 예를 들어 항목을 휴지통으로 끌거나 다른 페이지에서 정의한 위치로 끌 수 있습니다.

안타깝게도 드래그하면 mouseove, mousedown, mouseup 또는 기타 마우스 동작과 같이 항목이 마우스 아래에 있게 되는 문제가 있습니다. 항목을 휴지통으로 드래그하면 마우스 정보는 휴지통이 아닌 항목에 계속 남아 있습니다.

이 문제를 어떻게 해결하나요? 이를 해결하는 방법에는 여러 가지가 있습니다. 첫째, 이는 과거에 권장되었던 방식입니다. 마우스를 움직일 때 항목이 마우스를 따라가며 mouseover/mousemove 및 기타 마우스 이벤트를 차지하지 않습니다. mouseover 및 기타 마우스 이벤트를 사용하면 문제가 해결되지만 보기에는 좋지 않습니다. 항목이 마우스를 직접 따라갈 수 있기를 바랍니다.

또 다른 옵션은 항목을 드래그하지 않는 것입니다. 마우스 포인터를 변경하여 드래그할 항목을 표시한 다음 마우스를 놓은 위치에 놓을 수 있습니다. 이 솔루션은 미적인 이유로도 허용되지 않습니다.

최종 해결책은 드래그 효과를 제거하지 않는 것입니다. 이 방법은 처음 두 가지보다 훨씬 복잡합니다. 릴리스해야 하는 대상 목록을 정의해야 합니다. 마우스를 놓았을 때 릴리스 위치가 대상 목록 위치에 있는지 수동으로 확인해야 합니다. ．목표 위치에서 해제됩니다.

코드 복사

코드는 다음과 같습니다.<script> var iMouseDown = false; var dragObject = null; var curTarget = null; function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; } } 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){ left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top}; } 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 }; } function mouseDown(ev){ ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){ return false; } } function mouseUp(ev){ dragObject = null; iMouseDown = false; } function mouseMove(ev){ ev = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject){ dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false; } document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; window.onload = function() { makeDraggable(document.getElementById('DragImage5')); makeDraggable(document.getElementById('DragImage6')); makeDraggable(document.getElementById('DragImage7')); makeDraggable(document.getElementById('DragImage8')); } </script>

/* 
All code from the previous example is needed with the exception 
of the mouseUp function which is replaced below 
*/ 

var dropTargets = []; 

function addDropTarget(dropTarget){ 
 dropTargets.push(dropTarget); 
} 

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

 for(var i=0; i  var curTarget  = dropTargets[i]; 
  var targPos    = getPosition(curTarget); 
  var targWidth  = parseInt(curTarget.offsetWidth); 
  var targHeight = parseInt(curTarget.offsetHeight); 

  if( 
   (mousePos.x > targPos.x)                && 

   (mousePos.x < (targPos.x + targWidth))  && 
   (mousePos.y > targPos.y)                && 
   (mousePos.y < (targPos.y + targHeight))){ 
    // dragObject was dropped onto curTarget! 
  } 
 } 

 dragObject   = null; 
} 

<base href="http://www.blueidea.com">
<script> 
var iMouseDown  = false; 
var dragObject  = null; 
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

// Demo 0 variables 
var DragDrops   = []; 
var curTarget   = null; 
var lastTarget  = null;

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

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){ 
        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); 
        e     = e.offsetParent; 
    }

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

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 
    }; 
}

function mouseDown(ev){ 
    ev         = ev || window.event; 
    var target = ev.target || ev.srcElement;

if(target.onmousedown || target.getAttribute('DragObj')){ 
        return false; 
    } 
}

function mouseUp(ev){

//dragObject = null;

if(dragObject){ 
        ev           = ev || window.event; 
        var mousePos = mouseCoords(ev);

iMouseDown = false; 
}

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

/* 
    We are setting target to whatever item the mouse is currently on

Firefox uses event.target here, MSIE uses event.srcElement 
    */ 
    var target   = ev.target || ev.srcElement; 
    var mousePos = mouseCoords(ev);

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

// track the current mouse state so we can compare against it next time 
    lMouseState = iMouseDown;

// this prevents items on the page from being highlighted while dragging 
    if(curTarget || dragObject) return false; 
}

function addDropTarget(item, target){ 
    item.setAttribute('droptarget', target); 
}

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

window.onload = function (){ 
    makeDraggable(document.getElementById('DragImage9')); 
    makeDraggable(document.getElementById('DragImage10')); 
    makeDraggable(document.getElementById('DragImage11')); 
    makeDraggable(document.getElementById('DragImage12'));

addDropTarget(document.getElementById('DragImage9'),  'TrashImage1'); 
    addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); 
    addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); 
    addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); 
} 
</script>

<fieldset id="Demo6" style="HEIGHT: 70px">
<h3>Demo - Drag any image onto the  
trashcan</h3>
<img  src="/static/imghw/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_trash.gif" class="lazy" id="TrashImage1" timeout="600" new alt="2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법" >        
<img  src="/static/imghw/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_spade.gif" class="lazy" id="DragImage9" alt="2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법" > 
<img  src="/static/imghw/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_heart.gif" class="lazy" id="DragImage10" alt="2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법" > 
<img  src="/static/imghw/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_diamond.gif" class="lazy" id="DragImage11" alt="2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법" > 
<img  src="/static/imghw/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_club.gif" class="lazy" id="DragImage12" alt="2_javascript 스킬을 드래그 앤 드롭하기 위해 자바스크립트를 사용하는 방법" >  
</fieldset>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

마우스를 놓으면 드롭 속성이 있는지 확인하고, 마우스 포인터가 여전히 드롭 범위 내에 있으면 드롭 작업이 수행됩니다. (mousePos.x>targetPos.x)를 사용하여 마우스 포인터 위치가 대상 범위 내에 있는지 확인하고, 조건(mousePos.x
모두 함께 가져오기

드디어 드래그/드롭 스크립트 스니펫이 모두 완성되었습니다!다음은 DOM 핸들러를 생성하는 것입니다. 익숙하지 않다면 먼저 DOM 조작에 대한 JavaScript 입문서를 읽어보세요.

다음 코드는 컨테이너(컨테이너)를 생성하고 컨테이너 항목에 드래그/드롭해야 하는 모든 항목을 만듭니다. 이 코드는 이 기사의 두 번째 데모 뒤에 있습니다. 이를 통해 사용자는 목록(목록)을 기록하고 왼쪽 또는 오른쪽에 탐색 창으로 설정하거나 생각할 수 있는 더 많은 기능을 사용할 수 있습니다.

다음 단계에서는 독자가 실제 코드를 볼 수 있도록 "가짜 코드"를 사용합니다.

1. 문서가 처음 로드되면 dragHelper를 만듭니다. DIV.dragHelper는 움직이는 항목에 그림자 추가를 제공합니다. 실제 항목은 드래그되지 않았지만 insertBefor 및 AppendChild를 사용하여 이동되었습니다. dragHelper

2. mouseDown 및 mouseUp 함수를 사용합니다. 모든 작업은 iMouseDown 상태에 해당합니다. iMouseDown은 마우스 왼쪽 버튼을 누른 경우에만 true이고, 그렇지 않으면 false입니다.

3. 전역 변수 DragDrops를 만들었고 전역 함수 CreateDragContainer.DragDrops에는 서로 관련된 일련의 컨테이너가 포함되어 있습니다. 모든 매개변수(컨테이너)는 CreatedcragContainer를 통해 재구성되고 직렬화되어 자유롭게 이동할 수 있습니다. CreateDragContainer 함수는 또한 항목을 바인딩하고 속성을 설정합니다.

4. 이제 우리의 코드는 각 항목의 추가를 알고 있습니다. mouseMove 함수는 먼저 변수 대상을 설정합니다. 이 항목이 컨테이너에 있으면 마우스가 이동합니다. with getAttribute ):

작은 코드 조각을 실행하여 대상의 스타일을 변경합니다. 롤오버 효과 만들기
마우스가 놓이지 않았는지 확인하세요.
현재 항목을 나타내도록 curTarget을 설정하세요.
항목의 현재 위치를 기록하고, 필요한 경우 반환할 수 있습니다.
현재 항목을 dragHelper 로 이동하면 그림자 효과를 사용하여 항목을 이동할 수 있습니다.
항목을 dragHelper에 복사한 후에도 원본 항목은 여전히 마우스 포인터 아래에 있으므로 dragObj를 삭제해야 스크립트가 작동하고 dragObj가 포함됩니다. 컨테이너.
컨테이너에 있는 모든 항목의 현재 좌표, 높이/너비를 가져오므로 한 번만 기록하면 됩니다. 항목을 드래그하면 마우스로 이동할 때마다 수천 번 기록됩니다.
그렇지 않은 경우 이동해야 하는 항목이 아니므로 아무것도 할 필요가 없습니다.
5. curTarget을 확인하면 이동된 항목이 포함되어 있어야 합니다. 있는 경우 다음 작업을 수행합니다.

이전에 생성된 그림자 항목을 이동하기 시작합니다.
현재 컨테이너의 각 컨테이너를 확인하여 해당 범위 내에서 마우스가 이동했는지 확인하세요.
항목이 드래그되고 있는지 확인해 보겠습니다. 어느 컨테이너에 속함
컨테이너의 항목 앞이나 전체 컨테이너 뒤에 항목을 배치합니다.
항목이 보이는지 확인하세요
마우스가 컨테이너 안에 없으면 항목이 보이지 않는지 확인하세요 .
6. 이제 mouseUp 이벤트를 캡쳐하는 일만 남았습니다

<base href="http://www.blueidea.com">
<style>리 {
    여백-하단: 10px
}
OL {
    여백-상단: 5px
}
.드래그컨테이너 {
    테두리-오른쪽: #669999 단색, 패딩-오른쪽: #669999, 패딩-왼쪽: 0px, 너비: 100px : 5px; 테두리-하단: #669999 2px
}
.OverDragContainer {
    테두리-오른쪽: #669999 단색, 패딩-오른쪽: #669999, 패딩-왼쪽: 0px, 너비: 100px : 5px; 테두리-하단: #669999 2px
}
.OverDragContainer {
    배경색: #eee
}
.드래그박스 {
    테두리-오른쪽: #000 1px 단색; 테두리-상단: #000 1px 고체; FONT-SIZE: 10px; 왼쪽: 5px : 94px; 포인터: PADDING-TOP: 2px; 테두리-하단: #000 FONT-FAMILY: verdana, tahoma, arial;
}
.OverDragBox {
    테두리-오른쪽: #000 1px 단색; 테두리-상단: #000 1px 고체; FONT-SIZE: 10px; 왼쪽: 5px : 94px; 포인터: PADDING-TOP: 2px; 테두리-하단: #000 FONT-FAMILY: verdana, tahoma, arial;
}
.DragDragBox {
    테두리-오른쪽: #000 1px 단색; 테두리-상단: #000 1px 고체; FONT-SIZE: 10px; 왼쪽: 5px : 94px; 포인터: PADDING-TOP: 2px; 테두리-하단: #000 FONT-FAMILY: verdana, tahoma, arial;
} 
.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:1 solid #CCC;background-color:#F8F8F0;padding:10px;} 
</style>

// iMouseDown represents the current mouse button state: up or down 
/* 
lMouseState represents the previous mouse button state so that we can 
check for button clicks and button releases:

if(iMouseDown && !lMouseState) // button just clicked! 
if(!iMouseDown && lMouseState) // button just released! 
*/ 
var mouseOffset = null; 
var iMouseDown  = false; 
var lMouseState = false; 
var dragObject  = null;

// Demo 0 variables 
var DragDrops   = []; 
var curTarget   = null; 
var lastTarget  = null; 
var dragHelper  = null; 
var tempDiv     = null; 
var rootParent  = null; 
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function CreateDragContainer(){ 
    /* 
    Create a new "Container Instance" so that items from one "Set" can not 
    be dragged into items from another "Set" 
    */ 
    var cDrag        = DragDrops.length; 
    DragDrops[cDrag] = [];

/* 
    Each item passed to this function should be a "container".  Store each 
    of these items in our current container 
    */ 
    for(var i=0; i<arguments.length; i++){ 
        var cObj = arguments[i]; 
        DragDrops[cDrag].push(cObj); 
        cObj.setAttribute('DropObj', cDrag);

/* 
        Every top level item in these containers should be draggable.  Do this 
        by setting the DragObj attribute on each item and then later checking 
        this attribute in the mouseMove function 
        */ 
        for(var j=0; j<cObj.childNodes.length; j++){

// Firefox puts in lots of #text nodes...skip these 
            if(cObj.childNodes[j].nodeName=='#text') continue;

cObj.childNodes[j].setAttribute('DragObj', cDrag); 
        } 
    } 
}

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}; 
}

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

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

/* 
    We are setting target to whatever item the mouse is currently on

Firefox uses event.target here, MSIE uses event.srcElement 
    */ 
    var target   = ev.target || ev.srcElement; 
    var mousePos = mouseCoords(ev);

// mouseOut event - fires if the item the mouse is on has changed 
    if(lastTarget && (target!==lastTarget)){ 
        // reset the classname for the target element 
        var origClass = lastTarget.getAttribute('origClass'); 
        if(origClass) lastTarget.className = origClass; 
    }

/* 
    dragObj is the grouping our item is in (set from the createDragContainer function). 
    if the item is not in a grouping we ignore it since it can't be dragged with this 
    script. 
    */ 
    var dragObj = target.getAttribute('DragObj');

// if the mouse was moved over an element that is draggable 
    if(dragObj!=null){

// mouseOver event - Change the item's class if necessary 
        if(target!=lastTarget){ 
            var oClass = target.getAttribute('overClass'); 
            if(oClass){ 
                target.setAttribute('origClass', target.className); 
                target.className = oClass; 
            } 
        }

// if the user is just starting to drag the element 
        if(iMouseDown && !lMouseState){ 
            // mouseDown target 
            curTarget     = target;

// Record the mouse x and y offset for the element 
            rootParent    = curTarget.parentNode; 
            rootSibling   = curTarget.nextSibling;

mouseOffset   = getMouseOffset(target, ev);

// We remove anything that is in our dragHelper DIV so we can put a new item in it. 
            for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);

// Make a copy of the current item and put it in our drag helper. 
            dragHelper.appendChild(curTarget.cloneNode(true)); 
            dragHelper.style.display = 'block';

// set the class on our helper DIV if necessary 
            var dragClass = curTarget.getAttribute('dragClass'); 
            if(dragClass){ 
                dragHelper.firstChild.className = dragClass; 
            }

// disable dragging from our helper DIV (it's already being dragged) 
            dragHelper.firstChild.removeAttribute('DragObj');

/* 
            Record the current position of all drag/drop targets related 
            to the element.  We do this here so that we do not have to do 
            it on the general mouse move event which fires when the mouse 
            moves even 1 pixel.  If we don't do this here the script 
            would run much slower. 
            */ 
            var dragConts = DragDrops[dragObj];

/* 
            first record the width/height of our drag item.  Then hide it since 
            it is going to (potentially) be moved out of its parent. 
            */ 
            curTarget.setAttribute('startWidth',  parseInt(curTarget.offsetWidth)); 
            curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight)); 
            curTarget.style.display  = 'none';

// loop through each possible drop container 
            for(var i=0; i<dragConts.length; i++){ 
                with(dragConts[i]){ 
                    var pos = getPosition(dragConts[i]);

/* 
                    save the width, height and position of each container.

Even though we are saving the width and height of each 
                    container back to the container this is much faster because 
                    we are saving the number and do not have to run through 
                    any calculations again.  Also, offsetHeight and offsetWidth 
                    are both fairly slow.  You would never normally notice any 
                    performance hit from these two functions but our code is 
                    going to be running hundreds of times each second so every 
                    little bit helps!

Note that the biggest performance gain here, by far, comes 
                    from not having to run through the getPosition function 
                    hundreds of times. 
                    */ 
                    setAttribute('startWidth',  parseInt(offsetWidth)); 
                    setAttribute('startHeight', parseInt(offsetHeight)); 
                    setAttribute('startLeft',   pos.x); 
                    setAttribute('startTop',    pos.y); 
                }

// loop through each child element of each container 
                for(var j=0; j<dragConts[i].childNodes.length; j++){ 
                    with(dragConts[i].childNodes[j]){ 
                        if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;

var pos = getPosition(dragConts[i].childNodes[j]);

// save the width, height and position of each element 
                        setAttribute('startWidth',  parseInt(offsetWidth)); 
                        setAttribute('startHeight', parseInt(offsetHeight)); 
                        setAttribute('startLeft',   pos.x); 
                        setAttribute('startTop',    pos.y); 
                    } 
                } 
            } 
        } 
    }

// If we get in here we are dragging something 
    if(curTarget){ 
        // move our helper div to wherever the mouse is (adjusted by mouseOffset) 
        dragHelper.style.top  = mousePos.y - mouseOffset.y; 
        dragHelper.style.left = mousePos.x - mouseOffset.x;

var dragConts  = DragDrops[curTarget.getAttribute('DragObj')]; 
        var activeCont = null;

var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2); 
        var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);

// check each drop container to see if our target object is "inside" the container 
        for(var i=0; i<dragConts.length; i++){ 
            with(dragConts[i]){ 
                if(((getAttribute('startLeft'))                               < xPos) && 
                    ((getAttribute('startTop'))                                < yPos) && 
                    ((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) && 
                    ((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){

/* 
                        our target is inside of our container so save the container into 
                        the activeCont variable and then exit the loop since we no longer 
                        need to check the rest of the containers 
                        */ 
                        activeCont = dragConts[i];

// exit the for loop 
                        break; 
                } 
            } 
        }

// Our target object is in one of our containers.  Check to see where our div belongs 
        if(activeCont){ 
            // beforeNode will hold the first node AFTER where our div belongs 
            var beforeNode = null;

// loop through each child node (skipping text nodes). 
            for(var i=activeCont.childNodes.length-1; i>=0; i--){ 
                with(activeCont.childNodes[i]){ 
                    if(nodeName=='#text') continue;

// if the current item is "After" the item being dragged 
                    if( 
                        curTarget != activeCont.childNodes[i]                              && 
                        ((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) && 
                        ((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){ 
                            beforeNode = activeCont.childNodes[i]; 
                    } 
                } 
            }

// the item being dragged belongs before another item 
            if(beforeNode){ 
                if(beforeNode!=curTarget.nextSibling){ 
                    activeCont.insertBefore(curTarget, beforeNode); 
                }

// the item being dragged belongs at the end of the current container 
            } else { 
                if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){ 
                    activeCont.appendChild(curTarget); 
                } 
            }

// make our drag item visible 
            if(curTarget.style.display!=''){ 
                curTarget.style.display  = ''; 
            } 
        } else {

// our drag item is not in a container, so hide it. 
            if(curTarget.style.display!='none'){ 
                curTarget.style.display  = 'none'; 
            } 
        } 
    }

// track the current mouse state so we can compare against it next time 
    lMouseState = iMouseDown;

// mouseMove target 
    lastTarget  = target;

// track the current mouse state so we can compare against it next time 
    lMouseState = iMouseDown;

// this helps prevent items on the page from being highlighted while dragging 
    return false; 
}

function mouseUp(ev){ 
    if(curTarget){ 
        // hide our helper object - it is no longer needed 
        dragHelper.style.display = 'none';

// if the drag item is invisible put it back where it was before moving it 
        if(curTarget.style.display == 'none'){ 
            if(rootSibling){ 
                rootParent.insertBefore(curTarget, rootSibling); 
            } else { 
                rootParent.appendChild(curTarget); 
            } 
        }

// make sure the drag item is visible 
        curTarget.style.display = ''; 
    } 
    curTarget  = null; 
    iMouseDown = false; 
}

function mouseDown(){ 
    iMouseDown = true; 
    if(lastTarget){ 
        return false; 
    } 
}

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

window.onload = function(){ 
    // Create our helper object that will show the item while dragging 
    dragHelper = document.createElement('DIV'); 
    dragHelper.style.cssText = 'position:absolute;display:none;'; 
         
    CreateDragContainer( 
        document.getElementById('DragContainer1'), 
        document.getElementById('DragContainer2'), 
        document.getElementById('DragContainer3') 
    );

document.body.appendChild(dragHelper); 
}

</script>

<br><input onclick="runEx('runcode69125')" type="button" value="运行代码"> <input onclick="doCopy('runcode69125')" type="button" value="复制代码"> <input onclick="doSave(runcode69125)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div>
<br>
<p><span><span></span></span><span>你现在拥有了拖拽的所有东西．</span></p>
<p><span></span><span>下面的三个demo是记录事件历史．当你的鼠标在item上移动，将记录所生的事件，如果你不明白可以尝试一下鼠标的划过或者拖动，看有什么发生．<br><div class="htmlarea"><textarea id="runcode91289">
<base href="http://www.blueidea.com">
<script src="/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> 
 
      <fieldset id="Demo0"> 
      <h3 id="Demo-Drag-and-Drop-any-item">Demo - Drag and Drop any item</h3> 
      <div> 
      <div class="DragContainer" id="DragContainer1" overclass="OverDragContainer" history="History1"> 
      <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="DragContainer2" overclass="OverDragContainer" history="History1"> 
      <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="DragContainer3" overclass="OverDragContainer" history="History1"> 
      <div class="DragBox" id="Item9" overclass="OverDragBox" dragclass="DragDragBox">Item #9</div>
<div class="DragBox" id="Item10" overclass="OverDragBox" dragclass="DragDragBox">항목 #10</div>
      <div class="DragBox" id="Item11" overclass="OverDragBox" dragclass="DragDragBox">항목 #11</div>
      <div class="DragBox" id="Item12" overclass="OverDragBox" dragclass="DragDragBox">항목 #12</div>
</div>
      <fieldset>
<legend>연혁</legend>
      <div class="History" id="History1"></div>
</fieldset> </div>
</fieldset>
      <fieldset id="Demo7">
<legend>데모 - 항목 드래그 앤 드롭</legend>
      <div>
      <ol id="DragContainer7" history="History1">
        <li id="ListItem1">항목 #1
        </li>
<li id="ListItem2">항목 #2
        </li>
<li id="ListItem3">항목 #3
        </li>
<li id="ListItem4">항목 #4
        </li>
<li id="ListItem5">항목 #5 </li>
</ol>
</div>
</fieldset>
      <fieldset id="Demo8">
      <h3 id="데모-원하는-항목을-드래그-앤-드롭하세요">데모 - 원하는 항목을 드래그 앤 드롭하세요</h3>
      <div id="DragContainer8" history="History1">
      <div class="miniDragBox" id="MiniBox1">1</div>
      <div class="miniDragBox" id="MiniBox2">2</div>
      <div class="miniDragBox" id="MiniBox3">3</div>
      <div class="miniDragBox" id="MiniBox4">4</div>
      <div class="miniDragBox" id="MiniBox5">5</div>
      <div class="miniDragBox" id="MiniBox6">6</div>
      <div class="miniDragBox" id="MiniBox7">7</div>
      <div class="miniDragBox" id="MiniBox8">8</div>
      <div class="miniDragBox" id="MiniBox9">9</div>
      <div class="miniDragBox" id="MiniBox10">10</div>
      <div class="miniDragBox" id="MiniBox11">11</div>
      <div class="miniDragBox" id="MiniBox12">12</div>
      <div class="miniDragBox" id="MiniBox13">13</div>
      <div class="miniDragBox" id="MiniBox14">14</div>
      <div class="miniDragBox" id="MiniBox15">15</div>
      <div class="miniDragBox" id="MiniBox16">16</div>
</div>
</fieldset>
      <div></div>

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7366

자바 튜토리얼

1628

Cakephp 튜토리얼

1354

라라벨 튜토리얼

1266

PHP 튜토리얼

1214

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다