Heim > Artikel > Web-Frontend > JavaScript-Methode zum Implementieren des Ziehens von DIV-Ebenen und zum dynamischen Hinzufügen neuer Ebenen_Javascript-Fähigkeiten
JavaScript-Methode zum Implementieren des Ziehens von DIV-Ebenen und zum dynamischen Hinzufügen neuer Ebenen_Javascript-Fähigkeiten
- WBOYOriginal
- 2016-05-16 15:59:311210Durchsuche
Das Beispiel in diesem Artikel beschreibt, wie Sie das Ziehen von DIV-Ebenen und das dynamische Hinzufügen neuer Ebenen mithilfe von JavaScript implementieren. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Fügen Sie eine neue DIV-Ebene hinzu, ohne sie zu aktualisieren, und ziehen Sie die Ebene mit der Maus, um die Position zu verschieben. Wenn Sie sie verwenden, importieren Sie sie von außen sehr beliebt, und dieser Effekt ist häufig auf großen Websites wie GG und YAHOO zu beobachten.
<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?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"?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==""?"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>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>dom0</h1>
<div class="nr"></div>
</div>
<div class=mo id=m1>
<h1>dom1</h1><div class="nr"></div>
</div>
<div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div>
<div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div>
</div>
<div class=center id=dom1>
<div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div>
<div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div>
</div>
<div class=right id=dom2>
<div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div>
<div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div>
</div>
</div>
</body>
</html>
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So machen Sie die Registrierungsschaltfläche mithilfe von Javascript_Javascript-Kenntnissen nach zehn Sekunden anklickbarNächster Artikel：So machen Sie die Registrierungsschaltfläche mithilfe von Javascript_Javascript-Kenntnissen nach zehn Sekunden anklickbar
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse