Drag & Drop von Div Elementen

[Darkwind]

Hallo,

ich habe mit ein wenig Code ein "Konsole" geschrieben, die sich frei über den Bildschirm verschieben läßt.

Die Konsole wird zur Zeit bei mir in ein td-Element eingehängt.

  
td_element.appendChild(  
new Konsole('Konsole','Titel', function(){foo()}));  

Beim Verschieben stelle ich aber fest, dass die dahinterliegenden Elemente der Seite markiert werden. Wie kann man das verhindern?

Code ist in JS und CSS angefügt.

Gruß,
Darkwind

  
function Konsole(console_name, titel, onClose) {  
  var that = this;  
  this.console = new Object();  
  this.onClose = onClose;  
  if (!console_name) console_name = 'console';  
  with (this.console) {  
    with (this.console.div = document.createElement('div')) {  
      this.console.div.console = this;  
      className = 'console';  
    }  
    with (this.console.header = document.createElement('div')) {  
      className = 'console_header';  
      appendChild(document.createTextNode(titel?titel:console_name));  
      title = 'Klicken und Ziehen um Position zu Ändern. Doppelklick zum Schließen.';  
      ondblclick = function (e) {  
        that.console.div.parentNode.removeChild(that.console.div);  
        that.console = null;  
        that.onClose();  
      }  
      onmousedown = function (e) {  
        that.console.sx = (typeof window.scrollX == 'undefined'?(window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft):(e.clientX+window.scrollX));  
        that.console.sy = (typeof window.scrollY == 'undefined'?(window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop):(e.clientY+window.scrollY));  
        that.console.px = that.console.div.offsetLeft||10;  
        that.console.py = that.console.div.offsetTop||10;  
        document.onmousemove = function (e) {  
          that.console.div.style.left = Math.min(window.innerWidth-that.console.div.offsetWidth,Math.max(0,(that.console.px + (typeof window.scrollX == 'undefined'?window.event.clientX + document.documentElement.scrollLeft+document.body.scrollLeft:e.clientX+window.scrollX) - that.console.sx))) + 'px';  
          that.console.div.style.top = Math.min(window.innerHeight-that.console.div.offsetHeight,Math.max(0,(that.console.py + (typeof window.scrollY == 'undefined'?window.event.clientY + document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY) - that.console.sy))) + 'px';  
          try {  
            window.event.cancelBubble = true;  
            window.event.returnValue = false;  
          } catch (e) {}  
          try {  
            e.preventDefault();  
          } catch (e) {}  
        }  
        document.onmouseup = function (e) {  
          document.onmousemove = null;  
          document.onmouseup = null;  
        }  
      }  
    }  
    with (this.console.close_button = document.createElement('div')) {  
      onclick = header.ondblclick;  
      title = 'Close';  
      className = 'console_close_button';  
      style.cssText = (typeof close_button.filters != 'undefined'?"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/close.png');background:none;":"background:url('bilder/close.png') no-repeat;");  
    }  
    header.appendChild(this.console.close_button);  
    div.appendChild(this.console.header);  
    with (this.console.outputwrap = document.createElement('div')) {  
      outputwrap.className = 'console_outputwrap';  
    }  
    div.appendChild(this.console.outputwrap);  
    with (this.console.output = document.createElement('div')) {  
      className = 'console_output';  
    }  
    outputwrap.appendChild(this.console.output);  
  }  
  if (document.body)  
    document.body.appendChild(this.console.div);  
  else  
    setTimeout(function(){document.body.appendChild(this.console.div);},500);  
  return this.console.div;  
}  
  
Konsole.prototype.addContent = function(el) {  
  this.console.output.appendChild(el);  
}  

  
.console {  
  position: fixed;  
  top: 10px;  
  left: 10px;  
  width: 400px;  
  height: 250px;  
  max-height: 250px;  
  border: 2px groove black;  
  background-color: rgb(120, 181, 228);  
}  
  
.console .console_header {  
  width: 100%;  
  height: 10%;  
  max-height: 10%;  
  font-size: 70%;  
  color: rgb(240, 255, 255);  
  background-color: rgb(40, 101, 148);  
  text-align: center;  
  vertical-align: middle;  
  cursor: pointer;  
  font-weight: bold;  
}  
  
.console .console_header .console_close_button {  
  width: 16px;  
  height: 16px;  
  position: absolute;  
  top: 2px;  
  right: 2px;  
  vertical-align: top;  
}  
  
.console .console_outputwrap {  
  width: 100%;  
  max-width: 100%;  
  height: 90%;  
  max-height: 90%;  
  font-family: monospace;  
  font-size: 12px;  
  background-color: rgb(120, 181, 228);  
  text-align: left;  
  line-height: 13px;  
  overflow: auto;  
  border-top: 1px solid black;  
  margin-top: -1px;  
}  
  
.console .console_output {  
  padding: 2px;  
  height: 97%;  
}  

[molily]

Beim Verschieben stelle ich aber fest, dass die dahinterliegenden Elemente der Seite markiert werden.

Du kannst das Markieren von Text bei bestimmten Elementen verhindern:

element.unselectable = "on";
element.style.MozUserSelect = "none"; // oder -moz-user-select: none; im CSS
element.style.webkitUserSelect = "none"; // oder -webkit-user-select: none; im CSS

Vgl. auch </archiv/2006/6/t131340/#m849586> als Alternative zum unselectable-Attribut:
element.onselectstart = new Function("return false");

Mathias

[Darkwind]

»» Beim Verschieben stelle ich aber fest, dass die dahinterliegenden Elemente der Seite markiert werden.

Du kannst das Markieren von Text bei bestimmten Elementen verhindern:

element.unselectable = "on";
element.style.MozUserSelect = "none"; // oder -moz-user-select: none; im CSS
element.style.webkitUserSelect = "none"; // oder -webkit-user-select: none; im CSS

Vgl. auch </archiv/2006/6/t131340/#m849586> als Alternative zum unselectable-Attribut:
element.onselectstart = new Function("return false");

Mathias

Danke schön, Mathias.
Ich werde das mal probieren. :)