마우스 드래그 및 위치 스왑 효과는 사용자 경험 등을 개선하기 위해 주로 div에 사용됩니다. <style type="text/css"> div.box{ position:relative; padding:5px; background-color:#000; width:300px; height:300px; overflow:hidden; } div.box div.item{ float:left; width:90px; height:90px; background-color:#ccc; margin:5px; position:relative; cursor:pointer; } div.mask{ width:90px; height:90px; background-color:#f00; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); position:absolute; visibility:hidden; top:20px; left:20px; z-index:10; } </style> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ] var darg = { target : null, ox : 0, oy : 0 }; var box = document.createElement("div"); box.className = "box"; var mask = document.createElement("div"); mask.className = "mask"; box.appendChild(mask); for(var i = 0; i < 9; i ++){ var item = document.createElement("div"); item.className = "item"; item.appendChild(document.createTextNode(i + 1)); item.onmousedown = function(){ var e = arguments[0] || window.event; var o = e.target || e.srcElement; darg.target = o; mask.style["top"] = o.offsetTop + "px"; mask.style["left"] = o.offsetLeft + "px"; mask.style["visibility"] = "visible"; darg.ox = e.clientX - mask.offsetLeft; darg.oy = e.clientY - mask.offsetTop; } box.appendChild(item); } document.body.appendChild(box); function getItem(x,y){ x = x - box.offsetLeft; y = y - box.offsetTop; var o = box.childNodes[(3 - parseInt((box.offsetWidth - x)/100) + (2 - parseInt((box.offsetHeight - y)/100)) * 3)]; var n = darg.target.nextSibling; var on = o.nextSibling; box.insertBefore(o,n); box.insertBefore(darg.target,on); } document.onmousemove = function(){ if(darg.target != null && darg.target.nodeType == 1){ var e = arguments[0] || window.event; mask.style["left"] = e.clientX - darg.ox + "px"; mask.style["top"] = e.clientY - darg.oy + "px"; } } box.onmouseup = function(){ if(darg.target != null && darg.target.nodeType == 1){ var e = arguments[0] || window.event; var o = e.target || e.srcElement; getItem(e.clientX,e.clientY); darg.target = null; } } document.onmouseup = function(){ darg.target = null; mask.style["visibility"] = "hidden"; }
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
