communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > 判断可拖动div是否重合重合多少_javascript技巧

判断可拖动div是否重合重合多少_javascript技巧

WBOY

Libérer： 2016-05-16 18:21:24

original

1285 Les gens l'ont consulté

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Table</title> 
 
<style type="text/css"> 
body{margin:0px; padding:0px; font-size:12px} 
.div{height:160px;width:160px;position:absolute; text-align:center; } 
.demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px} 
.demo2{ border:1px solid #9BDF70;background-color:#F0FBEB;left:450px;top:20px} 
.demo3{ border:1px solid #BBE1F1;background-color:#EEFAFF;left:750px;top:20px} 
.demo4{ border:1px solid #96C2F1;background-color:#EEFAFF;left:150px;top:220px} 
.demo5{ border:1px solid #FFCC00;background-color:#FFFFF7;left:450px;top:220px} 
.demo6{ border:1px solid #E3E197;background-color:#FFFFDD;left:750px;top:220px} 
.demo7{ border:1px solid #ADCD3C;background-color:#F2FDDB;left:150px;top:420px} 
.demo8{ border:1px solid #F8B3D0;background-color:#FFF5FA;left:450px;top:420px} 
.demo9{ border:1px solid #D3D3D3;background-color:#F7F7F7;left:750px;top:420px} 
.focus{background-color: #990000;} 
</style> 
 
<div id="demo1" class="div demo1">demo1</div> 
<div id="demo2" class="div demo2">demo2</div> 
<div id="demo3" class="div demo3">demo3</div> 
<div id="demo4" class="div demo4">demo4</div> 
<div id="demo5" class="div demo5">demo5</div> 
<div id="demo6" class="div demo6">demo6</div> 
<div id="demo7" class="div demo7">demo7</div> 
<div id="demo8" class="div demo8">demo8</div> 
<div id="demo9" class="div demo9">demo9</div> 
<script language="javascript"> 
(function(window,undefined){ 
window.Sys = function (ua){ 
var b = { 
ie: /msie/.test(ua) && !/opera/.test(ua), 
opera: /opera/.test(ua), 
safari: /webkit/.test(ua) && !/chrome/.test(ua), 
firefox: /firefox/.test(ua), 
chrome: /chrome/.test(ua) 
},vMark = ""; 
for (var i in b) { 
if (b[i]) { vMark = "safari" == i ? "version" : i; break; } 
} 
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; 
b.ie6 = b.ie && parseInt(b.version, 10) == 6; 
b.ie7 = b.ie && parseInt(b.version, 10) == 7; 
b.ie8 = b.ie && parseInt(b.version, 10) == 8; 
return b; 
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

window.$ = function(Id){ 
return document.getElementById(Id); 
}; 
window.addListener = function(element,e,fn){ 
!element.events&&(element.events = {}); 
element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn}); 
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); 
}; 
window.addListener.guid = 1; 
window.removeListener = function(element,e,fn){ 
var handlers = element.events[e],type; 
if(fn){ 
for(type in handlers) 
if(handlers[type]===fn){ 
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); 
delete handlers[type]; 
} 
}else{ 
for(type in handlers){ 
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]); 
delete handlers[type]; 
} 
} 
}; 
window.setStyle = function(e,o){ 
if(typeof o=="string") 
e.style.cssText=o; 
else 
for(var i in o) 
e.style[i] = o[i]; 
};

var slice = Array.prototype.slice; 
window.Bind = function(object, fun) { 
var args = slice.call(arguments).slice(2); 
return function() { 
return fun.apply(object, args); 
}; 
}; 
window.BindAsEventListener = function(object, fun,args) { 
var args = slice.call(arguments).slice(2); 
return function(event) { 
return fun.apply(object, [event || window.event].concat(args)); 
} 
}; 
//copy from jQ 
window.extend = function(){ 
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; 
if ( typeof target === "boolean" ) { 
deep = target; 
target = arguments[1] || {}; 
i = 2; 
} 
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") 
target = {}; 
for(;i<length;i++){ 
if ( (options = arguments[ i ]) != null ) 
for(var name in options){ 
var src = target[ name ], copy = options[ name ]; 
if ( target === copy ) 
continue; 
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ 
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); 
} 
else if(copy !== undefined) 
target[ name ] = copy; 
} 
} 
return target; 
}; 
//copy from jQ 
window.each = function ( object, callback, args ) { 
var name, i = 0, length = object.length; 
if ( args ) { 
args = Array.prototype.slice.call(arguments).slice(2); 
if ( length === undefined ) { 
for ( name in object ) 
if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) 
break; 
} else 
for ( ; i < length; i++) 
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // 
break; 
} else { 
if ( length === undefined ) { 
for ( name in object ) 
if ( callback.call( object[ name ], name, object[ name ] ) === false ) 
break; 
} else 
for ( var value = object[0]; 
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 
} 
return object; 
}; 
window.currentStyle = function(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
}; 
window.objPos = function(elem){ 
var left = 0, top = 0, right = 0, bottom = 0,doc = elem ? elem.ownerDocument : document; 
if ( !elem.getBoundingClientRect || window.Sys.ie8 ) { 
var n = elem; 
while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; 
right = left + elem.offsetWidth; bottom = top + elem.offsetHeight; 
} else { 
var rect = elem.getBoundingClientRect(); 
left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft; 
top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft; 
left += rect.left; right += rect.right; 
top += rect.top; bottom += rect.bottom; 
} 
return { "left": left, "top": top, "right": right, "bottom": bottom }; 
}; 
window.hasClass = function(element, className){ 
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); 
}; 
window.addClass = function(element, className){ 
!window.hasClass(element, className)&&(element.className += " "+className); 
}; 
window.removeClass = function(element, className){ 
window.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ')); 
} 
})(window);

var Drag = { 
elem : null, 
zindex : 0, 
options : {}, 
init : function(){ 
each(arguments,function(i,elem,oThis){ 
addListener(elem,'mousedown',BindAsEventListener(oThis,oThis.start,elem)); 
},this); 
}, 
start : function(e,elem){ 
var elem=this.elem = elem; 
elem.style.zIndex=++this.zindex; 
this.x = e.clientX - elem.offsetLeft ; 
this.y = e.clientY - elem.offsetTop; 
this.marginLeft = parseInt(currentStyle(elem).marginLeft)||0; 
this.marginTop = parseInt(currentStyle(elem).marginTop)||0; 
Sys.ie?elem.setCapture():e.preventDefault(); 
addListener(document,"mousemove",BindAsEventListener(this,this.move)); 
addListener(document,"mouseup",Bind(this,this.up)); 
this.options.callbackmove&&this.options.callbackmove(this.elem); 
}, 
move : function(e){ 
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
var iLeft = e.clientX - this.x,iTop = e.clientY - this.y;obj = this.elem; 
obj.style.left = iLeft - this.marginLeft + "px"; 
obj.style.top = iTop - this.marginTop + "px"; 
this.options.callbackmove&&this.options.callbackmove(this.elem); 
}, 
up : function(){ 
removeListener(document,'mousemove'); 
removeListener(document,'mouseup'); 
Sys.ie&&this.elem.releaseCapture(); 
this.options.callbackup&&this.options.callbackup(this.elem); 
} 
};

var overlap = { 
hostel :{}, //</script>

Étiquettes associées：

可拖动div

source：php.cn

Article précédent：页面只有一个text的时候，回车自动submit的解决方法_表单特效 Article suivant：JavaScript中使用构造函数实现继承的代码_js面向对象

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...

Depuis 2024-04-06 22:01:35

0

3

816

Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...

Depuis 2024-04-06 20:05:30

0

1

544

Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...

Depuis 2024-04-06 19:25:49

0

1

505

La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...

Depuis 2024-04-06 16:54:10

0

1

410

Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ? J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...

Depuis 2024-04-06 16:29:50

0

2

490

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal