CicheR

CicheR

  • Name: Andres Cichero
  • Favorite Languages: C#, JavaScript
  • Website: [not set]
  • Location: Cordoba, Argentina
  • About Me: [not set]

Recent Comments

  • Javascript - Draggable Elements
    03/05/2012 - 15:16

    Code to work in Touch Devices!!!!
    =================================

    It's simple, in addition to handling mouse events (mousedown, mousemove, mouseup), we must also handle touch events: touchstart, touchmove and touchend.

    Changes in functions:

    dragStart:

     
    hookEvent(document, "mousemove", dragGo);
    hookEvent(document, "touchmove", dragGo);  //Added line
    hookEvent(document, "mouseup", dragStopHook);    hookEvent(document, "touchend", dragStopHook);  //Added line

    dragStop:

     
    unhookEvent(document, "mousemove", dragGo);
    unhookEvent(document, "touchmove", dragGo);  //Added line
    unhookEvent(document, "mouseup", dragStopHook);
    unhookEvent(document, "touchend", dragStopHook);  //Added line

    this.StartListening:

    hookEvent(attachElement, "mousedown", dragStart);
    hookEvent(attachElement, "touchstart", dragStart);  //Added line

    this.StopListening:

    unhookEvent(attachElement, "mousedown", dragStart);
    unhookEvent(attachElement, "touchstart", dragStart);  //Added line

    There can be more than one Touch events (multitouch devices), so, the touch events come in an array; for actual purposes we only care about the first event.

    Because of that, the function absoluteCursorPostion() also have to be modified:

     
    eventObj = eventObj ? eventObj : window.event;
    if (eventObj.changedTouches)              //Added line
      eventObj = eventObj.changedTouches[0];  //Added line

    And VOILA!!!...

    Works like a charm in touch devices!!! :-D

  • Javascript - Draggable Elements
    11/18/2010 - 14:08

    Code is not working when position is set by "%", for example in the case of this table:

    <table id="ExceptionBox_tbl" cellspacing="4" style="position: absolute; top: 35%; left: 50%; margin-left: -240px; z-index: 10; background-color: White; border-style: solid; border-color: DarkGrey;">

  • Javascript - Draggable Elements
    11/18/2010 - 13:13

    I modified the code to avoid this issue, these are the modifications made:

    Added "ApplyMargin" function to "Position" object:

      this.ApplyMargin = function(element)
      {
        if(typeof(element) == "string")
          element = document.getElementById(element);
        if(element == null)
          return;
        if(!isNaN(this.X))
          element.style.marginLeft = this.X + 'px';
        if(!isNaN(this.Y))
          element.style.marginTop = this.Y + 'px';  
      }

    Aded "useMargins" variable and modify "dragStart" and "dragGo" functions in "dragObject" object:

      var useMargins = false;  //Added variable
     
      function dragStart(eventObj)
      {
        if(dragging || !listening || disposed) return;
        dragging = true;
       
        if(startCallback != null)
          startCallback(eventObj, element);
       
        cursorStartPos = absoluteCursorPostion(eventObj);
       
        if (element.style.left.indexOf("%") > 0 || element.style.top.indexOf("%") > 0 ) //Begin Added Code
        {
            useMargins = true;
            elementStartPos = new Position(parseInt(element.style.marginLeft), parseInt(element.style.marginTop));
        }
        else        //End Added Code
            elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top));
       
        elementStartPos = elementStartPos.Check();
       
        hookEvent(document, "mousemove", dragGo);
        hookEvent(document, "mouseup", dragStopHook);
       
        return cancelEvent(eventObj);
      }

     
      function dragGo(eventObj)
      {
        if(!dragging || disposed) return;
       
        var newPos = absoluteCursorPostion(eventObj);
        newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos);
        newPos = newPos.Bound(lowerBound, upperBound)
        if (useMargins) //Begin Added Code
            newPos.ApplyMargin(element);
        else //End Added Code
            newPos.Apply(element);
        if(moveCallback != null)
          moveCallback(newPos, element);
           
        return cancelEvent(eventObj);
      }

    ;-)

Sponsors