SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Outline target on when drag-object hovers over it?

    Hello,
    I am reading the Sitepoint book "The javascript anthology" and working with drag and drop. I get this working but do not understand how I can highlight the target "hotzone" when the drag-object hovers over the target. I am working with the file "drag_n_drop.js" but I cannot see where I set the hover style for the target when a drag-object hovers it. I also have to remove the style when the object moves away from it (or is dropped on it). Any help for a newbie?

    /asle

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try again with some code

    I guess I was not very specific. This code is in the chapter "Implementing Drag-and-drop Behaviour". In the code below I am trying to make the target "hotZone" have a hover effect when the item (here an image) hovers over it.
    Code:
      var hotZone = document.getElementById("shoppingCart");
      var hotZonePosition = getPosition(hotZone); 
      var target = document.currentTarget;
    Here is the complete file "drag_n_drop.js". Any idea how I can check for the hover and do some css stuff with the hotZone? I am thankful for any directions!
    Code:
    addLoadListener(initDragNDrop);
    
    function initDragNDrop()
    {
      if (identifyBrowser().indexOf("ie") >= 0 && identifyOS() == "mac")
      {
        return false;
      }
    
      var LIs= document.getElementById("products").getElementsByTagName("img");
     // var LIs= getElementsByAttribute("class", "drag");
    
      for (var i = 0; i < LIs.length; i++)
      {
        attachEventListener(LIs[i], "mousedown", mousedownDragNDrop, false);
        LIs[i].style.cursor = "move";
      }
    }
    
    function mousedownDragNDrop(event)
    {
      if (typeof event == "undefined")
      {
        event = window.event;
      }
    
      if (typeof event.pageX == "undefined")
      {
        event.pageX = event.clientX + getScrollingPosition()[0]; 
        event.pageY = event.clientY + getScrollingPosition()[1];
      }
    
      var target = getEventTarget(event);
    
      while (target.nodeName.toLowerCase() != "img")
      {
        target = target.parentNode; 
      }
    
      document.currentTarget = target;
    
      var currentLeft = parseInt(target.style.left);
      var currentTop = parseInt(target.style.top);
    
      if (isNaN(currentLeft))
      {
        currentLeft = "0";
      }
    
      if (isNaN(currentTop))
      {
        currentTop = "0";
      }
    
      if (typeof target.originLeft == "undefined")
      {
        target.originLeft = currentLeft;
        target.originTop = currentTop;
      }
    
      target.clickOriginX = event.pageX;
      target.clickOriginY = event.pageY;
      target.differenceX = currentLeft - event.pageX;
      target.differenceY = currentTop - event.pageY;
    
      attachEventListener(document, "mousemove", mousemoveCheckThreshold, false);
      attachEventListener(document, "mouseup", mouseupCancelThreshold, false);
    
      stopDefaultAction(event);
    
      return false;
    }
    
    function mousemoveCheckThreshold(event)
    {
      if (typeof event == "undefined")
      {
        event = window.event;
      }
    
      if (typeof event.pageX == "undefined")
      {
        event.pageX = event.clientX + getScrollingPosition()[0];
        event.pageY = event.clientY + getScrollingPosition()[1];
      }
    
      var target = document.currentTarget;
    
      if (Math.abs(target.clickOriginX - event.pageX) > 3 || Math.abs(target.clickOriginY - event.pageY) > 3)
      {
        detachEventListener(document, "mousemove", mousemoveCheckThreshold, false);
        detachEventListener(document, "mouseup", mouseupCancelThreshold, false);
    
        attachEventListener(document, "mousemove", mousemoveDragNDrop, false);
        attachEventListener(document, "mouseup", mouseupDragNDrop, false);
        attachEventListener(document, "click", clickDragNDrop, false);  
      }
    
      stopDefaultAction(event);
    
      return true;
    }
    
    function mouseupCancelThreshold()
    {
      detachEventListener(document, "mousemove", mousemoveCheckThreshold, false);
      detachEventListener(document, "mouseup", mouseupCancelThreshold, false);
      
      return true;
    }
    
    function mousemoveDragNDrop(event)
    {
      if (typeof event == "undefined")
      {
        event = window.event;
      }
    
      if (typeof event.pageX == "undefined")
      {
        event.pageX = event.clientX + getScrollingPosition()[0];
        event.pageY = event.clientY + getScrollingPosition()[1];
      }
    
      var target = document.currentTarget;
    
      target.style.left = event.pageX + target.differenceX + "px";
      target.style.top = event.pageY + target.differenceY + "px";
    
      stopDefaultAction(event);
    
      return true;
    }
    
    function mouseupDragNDrop(event)
    {
      if (typeof event == "undefined")
      {
        event = window.event;
      }
    
      if (typeof event.pageX == "undefined")
      {
        event.pageX = event.clientX + getScrollingPosition()[0];
        event.pageY = event.clientY + getScrollingPosition()[1];
      }
    
      var hotZone = document.getElementById("shoppingCart");
      var hotZonePosition = getPosition(hotZone); 
      var target = document.currentTarget;
    
      if (!((event.pageX > hotZonePosition[0]) && (event.pageX < hotZonePosition[0] + hotZone.offsetWidth) && (event.pageY > hotZonePosition[1]) && (event.pageY < hotZonePosition[1] + hotZone.offsetHeight)))
      {  
        target.style.left = target.originLeft + "px";
        target.style.top = target.originTop + "px"; 
      }
      else
      {  // hotZone.style.backgroundColor = "#FFF4D8";
        var cartInput = document.getElementById("cartInput");
    
        if (cartInput == null)
        {
          var cartInput = document.createElement("input");
    
          cartInput.setAttribute("id", "cartInput");
          cartInput.setAttribute("name", "cartInput");
          cartInput.setAttribute("type", "hidden");
          cartInput.setAttribute("value", target.getAttribute("id"));
          document.getElementById("shoppingCart").appendChild(cartInput);
        }
        else
        {
          cartInput.setAttribute("value", cartInput.getAttribute("value") + "," + target.getAttribute("id"));
        }
    
        // In a practical system, you would probably submit the form here.
      //  alert("Item dropped on shopping cart!");
       
       hotZone.innerHTML = "Du la til varenr. "+ target.getAttribute('id') + " i kurven!"; 
       target.style.left = target.originLeft + "px";
        target.style.top = target.originTop + "px"; 
      }
      detachEventListener(document, "mousemove", mousemoveDragNDrop, false);
      detachEventListener(document, "mouseup", mouseupDragNDrop, false);
     //   hotZone.style.backgroundColor = "transparent";
      return true;
    }
    
    function clickDragNDrop(event)
    {
      if (typeof event == "undefined")
      {
        event = window.event;
      }
    
      detachEventListener(document, "click", clickDragNDrop, false);
    
      stopDefaultAction(event);
    
      return true;
    }
    
    function addLoadListener(fn)
    {
      if (typeof window.addEventListener != 'undefined')
      {
        window.addEventListener('load', fn, false);
      }
      else if (typeof document.addEventListener != 'undefined')
      {
        document.addEventListener('load', fn, false);
      }
      else if (typeof window.attachEvent != 'undefined')
      {
        window.attachEvent('onload', fn);
      }
      else
      {
        var oldfn = window.onload;
        if (typeof window.onload != 'function')
        {
          window.onload = fn;
        }
        else
        {
          window.onload = function()
          {
            oldfn();
            fn();
          };
        }
      }
    };
    
    
    
    
    function attachEventListener(target, eventType, functionRef, capture)
    {
        if (typeof target.addEventListener != "undefined")
        {
            target.addEventListener(eventType, functionRef, capture);
        }
        else if (typeof target.attachEvent != "undefined")
        {
            target.attachEvent("on" + eventType, functionRef);
        }
        else
        {
            eventType = "on" + eventType;
    
            if (typeof target[eventType] == "function")
            {
                var oldListener = target[eventType];
    
                target[eventType] = function()
                {
                    oldListener();
    
                    return functionRef();
                }
            }
            else
            {
                target[eventType] = functionRef;
            }
        }
    
        return true;
    };
    
    
    
    
    function detachEventListener(target, eventType, functionRef, capture)
    {
        if (typeof target.removeEventListener != "undefined")
        {
            target.removeEventListener(eventType, functionRef, capture)
        }
        else if (typeof target.detachEvent != "undefined")
        {
            target.detachEvent("on" + eventType, functionRef);
        }
        else
        {
            target["on" + eventType] = null;
        }
    
        return true;
    };
    
    
    
    
    function getEventTarget(event)
    {
        var targetElement = null;
    
        if (typeof event.target != "undefined")
        {
            targetElement = event.target;
        }
        else
        {
            targetElement = event.srcElement;
        }
    
        while (targetElement.nodeType == 3 && targetElement.parentNode != null)
        {
            targetElement = targetElement.parentNode;
        }
    
        return targetElement;
    };
    
    
    
    
    function stopDefaultAction(event)
    {
        event.returnValue = false;
    
        if (typeof event.preventDefault != "undefined")
        {
            event.preventDefault();
        }
    
        return true;
    };
    
    
    
    
    function getScrollingPosition()
    {
      //array for X and Y scroll position
      var position = [0, 0];
    
      //if the window.pageYOffset property is supported
      if(typeof window.pageYOffset != 'undefined')
      {
        //store position values
        position = [
          window.pageXOffset,
          window.pageYOffset
          ];
      }
    
      //if the documentElement.scrollTop property is supported
      //and the value is greater than zero
      if(typeof document.documentElement.scrollTop != 'undefined'
        && document.documentElement.scrollTop > 0)
      {
        //store position values
        position = [
          document.documentElement.scrollLeft,
          document.documentElement.scrollTop
          ];
      }
    
      //if the body.scrollTop property is supported
      else if(typeof document.body.scrollTop != 'undefined')
      {
        //store position values
        position = [
          document.body.scrollLeft,
          document.body.scrollTop
          ];
      }
    
      //return the array
      return position;
    };
    
    
    
    
    function getPosition(theElement)
    {
        var positionX = 0;
        var positionY = 0;
    
        while (theElement != null)
        {
            positionX += theElement.offsetLeft;
            positionY += theElement.offsetTop;
            theElement = theElement.offsetParent;
        }
    
        return [positionX, positionY];
    };
    
    
    
    
    function identifyBrowser()
    {
        var agent = navigator.userAgent.toLowerCase();
    
        if (typeof navigator.vendor != "undefined" && navigator.vendor == "KDE" && typeof window.sidebar != "undefined")
        {
            return "kde";
        }
        else if (typeof window.opera != "undefined")
        {
          var version = parseFloat(agent.replace(/.*opera[\/ ]([^ $]+).*/, "$1"));
    
          if (version >= 7)
          {
            return "opera7";
          }
          else if (version >= 5)
          {
            return "opera5";
          }
    
          return false;
        }
        else if (typeof document.all != "undefined")
        {
            if (typeof document.getElementById != "undefined")
            {
              var browser = agent.replace(/.*ms(ie[\/ ][^ $]+).*/, "$1").replace(/ /, "");
    
          if (typeof document.uniqueID != "undefined")
          {
            if (browser.indexOf("5.5") != -1)
            {
              return browser.replace(/(.*5\.5).*/, "$1");
            }
            else
            {
              return browser.replace(/(.*)\..*/, "$1");
            }
          }
          else
          {
            return "ie5mac";
          }
            }
    
            return false;
        }
        else if (typeof document.getElementById != "undefined")
        {
            if (navigator.vendor.indexOf("Apple Computer, Inc.") != -1)
            {
                if (typeof window.XMLHttpRequest != "undefined")
                {
                    return "safari1.2";
                }
    
                return "safari1";
            }
            else if (agent.indexOf("gecko") != -1)
            {
                return "mozilla";
            }
        }
    
        return false;
    };
    
    
    
    
    function identifyOS()
    {
        var agent = navigator.userAgent.toLowerCase();
    
        if (agent.indexOf("win") != -1)
        {
            return "win";
        }
        else if (agent.indexOf("mac"))
        {
            return "mac";
        }
        else
        {
            return "unix";
        }
    
        return false;
    };

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simplest to change the class of the dragged element on hover, mousedown and mouseup.

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean that the dragged object will change class or the hotzone? Where here should I put this?
    /asle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •