DIV 레이어 드래그를 구현하고 새layers_javascript 기술을 동적으로 추가하는 JavaScript 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

DIV 레이어 드래그를 구현하고 새layers_javascript 기술을 동적으로 추가하는 JavaScript 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

javascript견인

이 문서의 예에서는 JavaScript를 사용하여 DIV 레이어 드래그 및 새 레이어를 동적으로 추가하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

새 DIV 레이어를 새로고침하지 않고 레이어를 드래그하여 위치를 이동하세요. JS 부분을 새 파일로 저장하시면 외부에서 가져오실 수 있습니다. 매우 인기가 높으며 이러한 효과는 GG, YAHOO와 같은 대형 웹사이트에서 종종 볼 수 있습니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV层拖动，动态增加新层的JavaScript</title>
<style>
body {margin:0px;padding:0px;font-size:12px;text-align:center;}
body > div {text-align:center; margin-right:auto; margin-left:auto;} 
.content{width:900px;}
.content .left{
  float:left;
  width:20%;
  border:1px solid #0066CC;
  margin:3px;
}
.content .center{
 float:left;
 border:1px solid #FF0000;
 margin:3px;
 width:57%
}
.content .right{
 float:right;
 width:20%;
 border:1px solid #FF0000;
 margin:3px
}
.mo{
 height:auto;
 border:1px solid #CCC;
 margin:3px;
 background:#FFF
}
.mo h1{
 background:#ECF9FF;
 height:18px;
 padding:3px;
 cursor:move
}
.closediv{
 cursor:default;
}
.minusspan{
 cursor:default;
}
.mo .nr{
 height:80px;
 border:1px solid #F3F3F3;
 margin:2px
}
h1{
 margin:0px;
 padding:0px;
 text-align:left;
 font-size:12px
}
.dragging {
  FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
 opacity: 0.6;
 moz-opacity: 0.6
}
</style>
<script language="javascript">
var dragobj={}
window.onerror=function(){return false}
var domid=12
function on_ini(){
  String.prototype.inc=function(s){return this.indexOf(s)>-1&#63;true:false}
  var agent=navigator.userAgent
  window.isOpr=agent.inc("Opera")
  window.isIE=agent.inc("IE") && !isOpr
  window.isMoz=agent.inc("Mozilla") && !isOpr && !isIE
  if(isMoz){
    Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
    Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
  }
  basic_ini()
}
function basic_ini(){
  window.$=function(obj){return typeof(obj)=="string"&#63;document.getElementById(obj):obj}
  window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
window.onload=function(){
  on_ini()
  var o=document.getElementsByTagName("h1")
  for(var i=0;i<o.length;i++){
    o[i].onmousedown=addevent;
    //添加折叠和关闭按钮
    var tt = document.createElement("div");
    tt.style.cssText = "float:left";
    
    var span = document.createElement("span");
    span.innerHTML = "--"+o[i].innerHTML;
    span.style.cssText = "cursor:default;";
    span.onmousedown = minusDiv;
    tt.appendChild(span);
    
    var close = document.createElement("div");
    close.innerHTML = "X";
    close.style.cssText = "cursor:default;float:right";
    close.onmousedown = closeDiv;
    o[i].innerHTML = "";
    o[i].appendChild(tt);
    o[i].appendChild(close);
  }
}
//折叠或者显示层
function minusDiv(e)
{
  e=e||event
  var nr = this.parentNode.parentNode.nextSibling; //取得内容层
  nr.style.display = nr.style.display==""&#63;"none":"";
}
//移出层
function closeDiv(e)
{
  e=e||event
  var mdiv = this.parentNode.parentNode; //取得目标层
  oDel(mdiv);
}
function addevent(e){
  if(dragobj.o!=null)
    return false
  e=e||event
  dragobj.o=this.parentNode
  dragobj.xy=getxy(dragobj.o)
  dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
  //dragobj.o.className = 'dragging';
  dragobj.o.style.width=dragobj.xy[2]+"px"
  dragobj.o.style.height=dragobj.xy[3]+"px"
  dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
  dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
  dragobj.o.style.position="absolute"
  dragobj.o.style.filter='alpha(opacity=60)'; //添加拖动透明效果
  var om=document.createElement("div")
  dragobj.otemp=om
  om.style.width=dragobj.xy[2]+"px"
  om.style.height=dragobj.xy[3]+"px"
  om.style.border = "1px dashed red"; //ikaiser添加，实现虚线框
  dragobj.o.parentNode.insertBefore(om,dragobj.o)
  return false
}
document.onselectstart=function(){return false}
window.onfocus=function(){document.onmouseup()}
window.onblur=function(){document.onmouseup()}
document.onmouseup=function(){
  if(dragobj.o!=null){
    dragobj.o.style.width="auto"
    dragobj.o.style.height="auto"
    dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
    dragobj.o.style.position=""
    oDel(dragobj.otemp)
    dragobj={}
  }
}
document.onmousemove=function(e){
  e=e||event
  if(dragobj.o!=null){
    dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
    dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
    createtmpl(e, dragobj.o) //传递当前拖动对象
  }
}
function getxy(e){
  var a=new Array()
  var t=e.offsetTop;
  var l=e.offsetLeft;
  var w=e.offsetWidth;
  var h=e.offsetHeight;
  while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
  }
  a[0]=t;a[1]=l;a[2]=w;a[3]=h
 return a;
}
function inner(o,e){
  var a=getxy(o)
  if(e.x>a[1] && e.x<(a[1]+a[2]) && e.y>a[0] && e.y<(a[0]+a[3])){
    if(e.y<(a[0]+a[3]/2))
      return 1;
    else
      return 2;
  }else
    return 0;
}
//将当前拖动层在拖动时可变化大小，预览效果
function createtmpl(e, elm){
  for(var i=0;i<domid;i++){
    if(document.getElementById("m"+i) == null) //已经移出的层不再遍历
      continue;
    if($("m"+i)==dragobj.o)
      continue
    var b=inner($("m"+i),e)
    if(b==0)
      continue
    dragobj.otemp.style.width=$("m"+i).offsetWidth
    elm.style.width = $("m"+i).offsetWidth;
    //1为下移，2为上移
    if(b==1){
      $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
    }else{
      if($("m"+i).nextSibling==null){
        $("m"+i).parentNode.appendChild(dragobj.otemp)
      }else{
        $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
      }
    }
    return
  }
  for(var j=0;j<3;j++){
    if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
      continue
    var op=getxy($("dom"+j))
    if(e.x>(op[1]+10) && e.x<(op[1]+op[2]-10)){
      $("dom"+j).appendChild(dragobj.otemp)
      dragobj.otemp.style.width=(op[2]-10)+"px"
    }
  }
}
function add_div()
{
  var o=document.createElement("div")
  o.className="mo"
  o.id="m"+domid
  $('dom0').appendChild(o)
  o.innerHTML="<h1 id="dom-domid">dom"+domid+"</h1><div class=nr></div>"
  o.getElementsByTagName("h1")[0].onmousedown=addevent
  domid++
}
</script>
</head>
<body>
<INPUT TYPE="button" value="添加一个新的DIV层" onclick="add_div();">
<div class=content>
  <div class=left id=dom0>
    <div class=mo id=m0>
      <h1 id="dom">dom0</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m1>
      <h1 id="dom">dom1</h1><div class="nr"></div>
    </div>
    <div class=mo id=m2><h1 id="dom">dom2</h1><div class="nr"></div></div>
    <div class=mo id=m3><h1 id="dom">dom3</h1><div class="nr"></div></div>
  </div>
  <div class=center id=dom1>
    <div class=mo id=m4><h1 id="dom">dom4</h1><div class="nr"></div></div>
    <div class=mo id=m5><h1 id="dom">dom5</h1><div class="nr"></div></div>
  </div>
  <div class=right id=dom2>
    <div class=mo id=m8><h1 id="dom">dom8</h1><div class="nr"></div></div>
    <div class=mo id=m9><h1 id="dom">dom9</h1><div class="nr"></div></div>
  </div>
</div>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명

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

관련 기사

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는