nicht angemeldet
So, jetzt Funktioniert es in allen IE's ausser im IE8.
Hoffe es kann mir wer helfen.
drag_n_drop.js:
/********************************************************/
/* Auschnitt aus meiner mainlibary die ich für */
/* die DragNDrop-Klasse genutzt habe */
/********************************************************/
_$ = function(clas, parent){
pardoc = parent || document;
if(document.getElementsByClassName){
return pardoc.getElementsByClassName(clas);
}else if(document.querySelectorAll){
return document.querySelectorAll('.class');
}else{
var obj = document.all ? document.all : (document.getElementById(parent) || document.body).getElementsByTagName('*');
var ret = new Array();
for( var i=0, l=obj.length; i<l; i++){
if(hasClass(obj[i], clas)) ret.push(obj[i]);
}
}
return ret;
}
hasClass = function(obj, clas){
var clas_erg = new Array();
if(obj.classList && obj.classList.contains(clas)){
return true;
}else if(document.all){
clas_erg = obj.className.split(" ");
}else if(obj.getAttribute("class")!=null){
clas_erg = obj.getAttribute("class").split(" ");
}else return false;
for(var i=0, l=clas_erg.length; i<l; i++){
if(clas_erg[i] === clas) return true;
}
}
mouse_pos = function(e) {
if(!e) e = window.event;
var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
window.document.documentElement : window.document.body;
pos={X:null,Y:null};
if(typeof e.pageY == "number"){
pos.Y = e.pageY;
pos.X = e.pageX;
}else{
pos.Y = e.clientY + body.scrollTop - body.clientTop;
pos.X = e.clientX + body.scrollLeft - body.clientLeft;
}
return pos;
}
function DragNDrop(){
var _this = this; // Selbstreferenz
this.drag_obj = null; // Speichert das aktuell zu bewgende Objekt
this.drag_objects = _$("dragobj"); // Speichert alle mit class="drag_obj" ab
this.windows = _$("window"); // Speichert alle mit class="window" ab
this.drag_obj_pos = {X:null,Y:null}; // Mausposition relative zum Dragobjekt
this.pos = {X:null,Y:null}; // Mausposition
/********************************************************/
this.windowMouseDown = function(){
_this.z_index();
this.style.zIndex = 9999;
}
for(var i=0, l=this.windows.length; i<l; i++){
this.windows[i].onmousedown = this.windowMouseDown;
}
/********************************************************/
this.objMouseDown = function(e){
if(!e) e = window.event;
_this.drag_obj = this;
_this.pos = mouse_pos(e);
if(!hasClass(this.parentNode, "window")){
_this.drag_obj_pos.Y = _this.pos.Y-this.offsetTop;
_this.drag_obj_pos.X = _this.pos.X-this.offsetLeft;
this.style.zIndex = 10000;
}else{
_this.drag_obj_pos.Y = _this.pos.Y-this.parentNode.offsetTop;
_this.drag_obj_pos.X = _this.pos.X-this.parentNode.offsetLeft;
this.parentNode.style.zIndex = 10000;
}
this.style.cursor = "move"; // Ändert den Cursor in eine Hand
_this.z_index();
}
for(var i=0, l=this.drag_objects.length; i<l; i++){
var obj = this.drag_objects[i];
obj.onmousedown = this.objMouseDown;
}
/********************************************************/
document.onmousemove = function(e){
if(!e) e = window.event;
if(_this.drag_obj != null){
_this.pos = mouse_pos(e);
var posX = _this.pos.X-_this.drag_obj_pos.X;
var posY = _this.pos.Y-_this.drag_obj_pos.Y;
if(!hasClass(_this.drag_obj.parentNode, "window")){
var style = _this.drag_obj.style;
style.position = "absolute";
style.top = posY + "px";
style.left = posX + "px";
}else{
var style = _this.drag_obj.parentNode.style;
style.position = "absolute";
style.top = posY + "px";
style.left = posX + "px";
}
}
}
/********************************************************/
document.onmouseup = function(e){
if(_this.drag_obj){
var obj = _this.drag_obj;
obj.style.cursor = "default"; // setzt den Cursor wieder auf normal
_this.z_index();
if(hasClass(obj.parentNode, "window")){
obj.parentNode.style.zIndex = 9999;
}else{
obj.style.zIndex = 9999;
}
_this.drag_obj = null; // Beendet
}
}
/********************************************************/
this.z_index = function(){
for(var i=0, l=_this.drag_objects.length; i<l; i++){
var obj = _this.drag_objects;
if(hasClass(obj[i].parentNode, "window")) var _obj = obj[i].parentNode;
else var _obj = obj[i];
if(_obj.style && _obj.style.zIndex){
_obj.style.zIndex = parseInt(_obj.style.zIndex)-1;
}
}
}
}
function init(){
var dragClass = new DragNDrop();
}
contentLoaded(window, init);
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="author" content="Robin (Gawin) Gerhartz" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="Drag'n Drop Testseite" />
<script type="text/javascript" src="contentloaded.js"></script>
<script type="text/javascript" src="drag_n_drop.js"></script>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
body{
background-color: #adadad;
overflow:hidden;
}
.div{
height:50px;
width:50px;
}
.window{
background-color:white;
width:150px;
}
.window .win_content{
background-color:black;
width:150px;
height:150px;
}
.window p{
text-align: center;
}
</style>
<title>Drag'n Drop</title>
</head>
<body>
<div id="www" class="dragobj div" style="background-color:navy;"></div>
<div id="firefox" class="dragobj div" style="background-color:yellow;"></div>
<div class="window">
<div class="dragobj">
<p>test</p>
</div>
<div class="win_content">
</div>
</div>
<div class="window">
<div class="dragobj">
<p>test2</p>
</div>
<div class="win_content" style="background-color:blue;">
</div>
</div>
<div class="window">
<div class="dragobj">
<p>test3</p>
</div>
<div class="win_content" style="background-color:red;">
</div>
</div>
</body>
</html>
und die Demoseite wie immer Hier.