SV: [thelist] drag layer in Gecko?

Marcus Andersson marcan at home.se
Tue Oct 21 10:47:32 CDT 2003


You seems to be using the old Nutscraper way of doing things. I threw
your js code away and wrote the following code instead. You don't have
to use it but you can get inspiration from it. 

I'm an OO guy so if you don't like it... ;)

/Marcus

<script LANGUAGE="JavaScript">
  var ie, gecko;  // I know, way to simple but this is an example.
Right?
  if(document.all) {
    ie = true;
    gecko = false;
  }
  else {
    ie = false;
    gecko = true;   
  }

function EventUtil() {}
EventUtil.addEventListener = function(o, type, handler) {
  if(ie) {
    o.attachEvent("on" + type, handler);
  }
  else if(gecko) {
    o.addEventListener(type, handler, false);
  }
}
EventUtil.removeEventListener = function(o, type, handler) {
  if(ie) {
    o.detachEvent("on" + type, handler);
  }
  else if(gecko) {
    o.removeEventListener(type, handler, false);
  }
}
EventUtil.fitEvent = function(evt) {
  if(ie) {
    return window.event;
  }
  if(gecko) {
    return evt;
  }
} 

function Dragable(dragContainerId, dragHandleId) {
  
  var origX, origY;
  var mdX, mdY;  
  
  function getContainer() {
    return document.getElementById(dragContainerId);
  }
  
  function getHandle() {
      return document.getElementById(dragHandleId);
  }
  
  function mouseOver(evt) {    
    evt = EventUtil.fitEvent(evt);    
    getHandle().style.cursor = "move";
  }
  
  function mouseOut(evt) {
    evt = EventUtil.fitEvent(evt);
    getHandle().style.cursor = "default";
  }
  
  function mouseDown(evt) {
    status = "mousedown";
    evt = EventUtil.fitEvent(evt);
    EventUtil.addEventListener(document, "mousemove", mouseMove);
    EventUtil.addEventListener(document, "mouseup", mouseUp);
    mdX = evt.clientX;    
    mdY = evt.clientY;
    var dragContainer = getContainer();
    origX = dragContainer.offsetLeft;
    origY = dragContainer.offsetTop;
  }
  
  function mouseMove(evt) {    
    evt = EventUtil.fitEvent(evt);

    var newX = origX + evt.clientX - mdX;
    var newY = origY + evt.clientY - mdY;

    var dragContainer = getContainer();    
    dragContainer.style.left = newX + "px";
    
    dragContainer.style.top = newY + "px";
    
  }
  
  function mouseUp(evt) {
    EventUtil.removeEventListener(document, "mousemove", mouseMove);
    EventUtil.removeEventListener(document, "mouseup", mouseUp);    
  }  
  
  function init() {          
    var dragHandle = document.getElementById(dragHandleId);
    EventUtil.addEventListener(dragHandle, "mouseover", mouseOver); 
    EventUtil.addEventListener(dragHandle, "mouseout", mouseOut); 
    EventUtil.addEventListener(dragHandle, "mousedown", mouseDown); 
  }
  
  init();
}


window.onload = function() {
  // create an instance with id to the drag container as the first param
  // and id to the drag handle as the second param.
  var dragable = new Dragable("panel", "aDragHandle");  
}

</script>
</head>
<body>

<div id="panel" class="panel">

<div id="aDragHandle" class='move'>::Grab to move::</div><div
class='info'>Stuff in Div</div>
</div>
</body>
</html>

-----Ursprungligt meddelande-----
Från: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] För Tom Dell'Aringa
Skickat: den 21 oktober 2003 15:36
Till: thelist at lists.evolt.org
Ämne: [thelist] drag layer in Gecko?


I have a small script, somewhat old, that allows me to drag a layer. You
can see it here:

http://www.pixelmech.com/review/dragDrop.html

Currently this is only working in IE. I want to revise it to work with
Gecko (NS6+) but I am having a hard time finding references on what I
need to do. Any help is appreciated!

Tom

=====
http://www.pixelmech.com/ :: Web Development Services
http://www.DMXzone.com/ :: Premium Content Author / JavaScript / Every
Friday! http://www.thywordistruth.net/ :: Eternal Life

"That's not art, that's just annoying." -- Squidward
-- 
* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt ! 



More information about the thelist mailing list