nicht angemeldet
Hi Leute,
ich hab ne Drag'n Drop - Klasse geschrieben und würde gerne eure meinungen und verbesserungsvorschläge von euch wissen.
Hier die drag_n_drop.js:
/********************************************************/
/* Auschnitt aus meiner mainlibary die ich für */
/* die DragNDrop-Klasse genutzt habe */
/********************************************************/
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};
try{
pos.Y = e.pageY;
pos.X = e.pageX;
}catch(e){
pos.Y = e.clientY + body.scrollTop - body.clientTop;
pos.X = e.clientX + body.scrollLeft - body.clientLeft;
}
return pos;
}
_$ = function(clas, parent){
var obj = (document.getElementById(parent) || document.body).getElementsByTagName('*');
var ret = new Array();
for( var i=0, l=obj.length; i<l; i++){
if(obj[i].getAttribute("class")){
var erg = obj[i].getAttribute("class").split(" ");
for(var i2=0,l2=erg.length; i2<l2; i2++){
if(clas == erg[i2]){ ret.push(obj[i]); }
}
}
}
return ret;
}
hasClass = function(obj, clas){
if(obj.getAttribute("class")!=null){
var clas_erg = obj.getAttribute("class").split(" ");
for(var i=0, l=clas_erg.length; i<l; i++){
if(clas_erg[i] === clas) return true;
}
return false;
}else return false;
}
function DragNDrop(){
_this = this; // Selbstreferenz
this.drag_obj = null; // Speichert das aktuell zu bewgende Objekt
this.drag_objects = _$("drag_obj"); // 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
/********************************************************/
for(var i=0, l=this.windows.length; i<l; i++){
this.windows[i].onmousedown = function(e){
_this.z_index();
this.style.zIndex = 9999;
}
}
/********************************************************/
for(var i=0, l=this.drag_objects.length; i<l; i++){
var obj = this.drag_objects[i];
obj.onmousedown = function(e){
_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();
}
}
/********************************************************/
document.onmousemove = function(e){
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")){
with(_this.drag_obj.style){
position = "absolute";
top = posY + "px";
left = posX + "px";
}
}else{
with(_this.drag_obj.parentNode.style){
position = "absolute";
top = posY + "px";
left = posX + "px";
}
}
}
}
/********************************************************/
document.onmouseup = function(e){
if(_this.drag_obj){
var obj = _this.drag_obj;
_this.drag_obj.style.cursor = "default"; // setzt den Cursor wieder auf normal
_this.z_index();
if(hasClass(_this.drag_obj.parentNode, "window")){
_this.drag_obj.parentNode.style.zIndex = 9999;
}else{
_this.drag_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 = eval(_obj.style.zIndex+"-1");
}
}
}
}
window.onload = function(){
var dragClass = new DragNDrop();
}
Und hier die 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="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="drag_obj div" style="background-color:navy;"></div>
<div id="firefox" class="drag_obj div" style="background-color:yellow;"></div>
<div class="window">
<div class="drag_obj">
<p>test</p>
</div>
<div class="win_content">
</div>
</div>
<div class="window">
<div class="drag_obj">
<p>test2</p>
</div>
<div class="win_content" style="background-color:blue;">
</div>
</div>
<div class="window">
<div class="drag_obj">
<p>test3</p>
</div>
<div class="win_content" style="background-color:red;">
</div>
</div>
</body>
</html>
Eine Demoseite findet Ihr HIER.
Würde mich um feedback freuen.
Gruss Gawin