Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    Firefox and Chrome difficulty

    Hello again;

    I am testing in Firefox( two versions ), Chrome, Opera (two versions), Safari
    on Mac OSX and am seeing a peculiarity.
    Code:
    <div id="dialog" style="position:absolute;top:50px;left:600px;">
    <div id="head"><p id="panelTitle">Item Info:</p></div>
    <p>Drag this panel to move </p>
    <pre id="target1"><img id="srcImg" src="windows/img/front_window.jpg" alt="test" /></pre>
    <pre id="target2"> </pre>
    <div id="closer"><p class="dialog"><a id="dClose" href="javascript:">Close</a></p></div>
    event listener assigned to a separate anchor tag makes this markup visible and drag-able.
    The mousemove event listener for dragging is assigned to the parent div, id='dialog'

    In Firefox and Google's Chrome browser, if I mousedown on the image
    and try to drag, the system tries to move and copy the image. When I
    release the mouse, the whole panel sticks to the pointer and moves with
    the pointer until I click on it.

    The Question:
    What event would I do preventDefault, cancelbubble, or return false
    to get around this?
    (perhaps for a separate post, how would I prevent the client form copying
    content?)

    Safari will do the same accept that it will not stick to the mouse pointer position on mouseup.

    In Opera, it works fine (accept the earlier verison, v9x leaves a trail of ghost lines where the panel was moved from)

    I have a pc with I.E. and have not yet tested this specific issue.

    Thank you for your time and attention
    JK

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Can you post the related js?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    Here goes

    Code:
    function dragElement()
             {
              this.group = '';
              this.setGroup = function(grp) 
                              {
                               // set group to prep for
                               this.group = grp;
                              }
              this.object = new Object();
              this.findObj = function(objId, objLst)
                             {
                              /*
                               the object is to search the department inventory database for the object with matching id property
                              */
                              for(var i = 0; i < objLst.length; i++ )
                                 {
                                  if(objLst[i].id == objId)
                                    {
                                     this.object = objLst[i];
                                     break;
                                    }
                                 }
                             }
                             
              this.drag = function(target, event)
                      { 
                       //var elementToDrag = document.getElementById(elementToDrag)// will not work when called from sourced js file in Firefox
                       var deltaX = event.clientX - parseInt(target.style.left);
                       var deltaY = event.clientY - parseInt(target.style.top);
                       if(document.addEventListener)
                         {
                          document.addEventListener("mousemove", moveHandler, true);
                          document.addEventListener("mouseup", upHandler, true)
                         }
                       else if(document.attachEvent)
                         {
                          document.attachEvent("onmousemove", moveHandler);
                          document.attachEvent("onmouseup", upHandler);
                         }
                       else
                         {
                          var oldmovehandler = document.onmousemove;
                          var olduphandler = document.onmouseup;
                          document.onmousemove = moveHandler;
                          document.onmouseup = upHandler;
                         }
                       if(event.stopPropagation)
                         {
                          event.stopPropagation;
                         }
                       else
                         {
                          event.cancelBubble = true;
                         }
                       if(event.preventDefault)
                         {
                          event.stopPropagation;
                         }
                       else
                         {
                          event.returnValue = false;
                         }
                       function moveHandler(e)
                                {
                                 if(!e)
                                   {
                                    e = window.event;
                                   }
                                 target.style.left = (e.clientX - deltaX) + "px";
                                 target.style.top = (e.clientY - deltaY) + "px";
                                 if(e.stopPropagation)
                                   {
                                    e.stopPropagation;
                                   }
                                 else
                                   {
                                    e.cancelBubble = true;
                                   }
                                }
                       function upHandler(e)
                                {
                                 if(!e)
                                   {
                                    e = window.event;
                                   }
                                 if(document.removeEventListener)
                                   {
                                    document.removeEventListener("mouseup", upHandler, true);
                                    document.removeEventListener("mousemove", moveHandler, true);
                                   }
                                 else if(document.detachEvent)
                                   {
                                    document.detachEvent("onmouseup", upHandler)
                                    document.detachEvent("onmousemove", moveHandler)
                                   }
                                 if(e.stopPropagation)
                                   {
                                    e.stopPropagation
                                   }
                                 else
                                   {
                                    e.cancelBubble = true;
                                   }
                                }
                      }
               
               this.eventLst = new Array();
               this.init = function(IDLST)
                           {
                            var panel = document.getElementById('dialog');
                            var src = document.getElementById('srcImg');
                            for(var i = 0; i < IDLST.length; i++ )
                               {
                                this.eventLst[i] = document.getElementById(IDLST[i]);
                                if(document.addEventListener)
                                  {
                                   this.eventLst[i].addEventListener('click', function(e){ showObj(panel, src, e, _DIALOG); }, false);
                                  }
                                else if(window.attachEvent)
                                  {
                                   this.eventLst[i].attachEvent('onclick', function(e){ showObj(panel, src, e, _DIALOG); });
                                  }
                               }
                            var showObj = function(panel, src, e, _DIALOG)
                                          {
                                           var subject= '';
                                           if(e.srcElement)
                                             {
                                              subject = e.srcElement;
                                             }
                                           else if(e.target)
                                             {
                                              subject = e.target;
                                             }
                                           _DIALOG.findObj(subject.id,  _DIALOG.group );
                                           var txt = document.getElementById('target2');
                                           txt.childNodes[0].data = _DIALOG.object.ref;
                                           panel.style.top = (parseInt(e.screenY) - 300)+'px';
                                           panel.style.visibility = 'visible'; 
                                           src.setAttribute('src', subject.src);
                                           var wid = parseInt(_DIALOG.object.width);
                                           if(wid < 180)
                                             {
                                              _DIALOG.object.width = '180';
                                             }
                                           panel.style.width = parseInt(_DIALOG.object.width)+7+'px';
                                           panel.style.maxWidth = parseInt(_DIALOG.object.width)+7+'px';
                                          }
                                          
                            var test = document.getElementById('dShow');
                            var handle = document.getElementById('head');
                            var close = document.getElementById('dClose');
                            if(document.addEventListener)
                              {
                               panel.addEventListener('mousedown', function(e){ _DIALOG.drag(panel, e); }, false);
                               close.addEventListener('click', function(){ _DIALOG.close() }, false);
                               close.addEventListener('mouseover', function(){ close.style.background = '#000066'; close.style.borderColor = '#cccccc' }, false);
                               close.addEventListener('mouseout', function(){ close.style.background = '#000033'; close.style.borderColor = '#000033' }, false);
                              }
                            else if(window.attachEvent)
                              {
                               panel.attachEvent('onmousedown', function(e){ _DIALOG.drag(panel, e); } );
                               close.attachEvent('onclick', function(){ _DIALOG.close() } );
                               close.attachEvent('onmouseover', function(e){ e.srcElement.style.background = '#000066'; e.srcElement.style.borderColor = '#cccccc' } );
                               close.attachEvent('onmouseout', function(e){ e.srcElement.style.background = '#000033'; e.srcElement.style.borderColor = '#000033' } );
                              }
                           }
                           
               this.close = function()
                            {
                             var target = document.getElementById('dialog');
                                 target.style.visibility = 'hidden';
                             var handle = document.getElementById('head');
                             var close = document.getElementById('dClose');
                             if(document.removeEventListener)
                               {
                                handle.removeEventListener('mousedown', function(e){ _DIALOG.drag(target, e); }, false);
                                close.removeEventListener('click', function(e){ target.style.visibility = 'hidden' }, false);
                                close.removeEventListener('mouseover', function(){ close.style.background = '#000066'; close.style.borderColor = '#cccccc' }, false);
                                close.removeEventListener('mouseout', function(){ close.style.background = '#000033'; close.style.borderColor = '#000033' }, false);
                               }
                             else if(document.detachEvent)
                               {
                                handle.detachEvent('onmousedown', function(e){ _DIALOG.drag(target, e); } );
                                close.detachEvent('onclick', function(){ target.style.visibility = 'hidden' } );
                                close.detachEvent('onmouseover', function(){ close.style.background = '#000066'; close.style.borderColor = '#cccccc' } );
                                close.detachEvent('onmouseout', function(){ close.style.background = '#000033'; close.style.borderColor = '#000033' } );
                               }
                            }
               
               this.imgList = new Array();
               this.preload = function(a)
                              {
                               for(var i = 0; i < a.length; i++)
                                  {
                                   this.imgList[i] = new Image();
                                   this.imgList[i].src = a[i];
                                  }
                              }
              }
    
    
    var _DIALOG = new dragElement();
    then in main page:
    Code:
    var _self = 'index.php';
    var _loaded = 'port';
    var navIdList = new Array();
    navIdList[0] = 'Lamps';
    navIdList[1] = 'Windows';
    navIdList[2] = 'Anonymous Collection';
    
    
    var group = lamps; // determined by php
    
    
    window.onload = function()
                    { 
                     navElement.init();
                     NAV_EVENTS.setEvents(navIdList);
                     _DIALOG.preload(srcLst);
                     _DIALOG.setGroup(group);
                     _DIALOG.init(idLst);
                    }
    
    // idLst and srcLst are in a separate, sourced js file determined by php
    // according to the subhead selection by the user.
    I am listed as a beginning coder. That is the decision made by this forum.
    In fact, I have been doing javascript and php since around 2003, but not
    as a payed employee. I have done my own web sites and some for others.
    This is for a stained glass artist.

    Note about drag code: It is virtually quoted from O'reilly text:
    Javascript, The Definitive Guide, 5th Ed.
    (theirs was not wrapped in object constructor code as mine is).

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    I got it.

    to the _DIALOG.init() method I add the following code
    Code:
    // where 'src' is the image tag
    if(document.addEventListener)
       {
         src.addEventListener('mousedown', function(e){ e.preventDefault(); e.cancelBubble; }, false);
       }
    else if(document.attachEvent)
       {
        // changed to :
         src.attachEvent('mousedown', function(e){ return false });
         // src.attachEvent('onmousedown', function(e){ return false });
       // src.attachEvent('mousedown', function(e){ e.returnValue = false });
       // still no cigar
       }
    I was having similar problems with IE.
    Waiting for pc to boot up to test on IE......... Nope, don't have the
    right syntax there, yet....

    the closest I can get in I.E. is e.cancelBubble. That prevents the dialog panel from being dragged at all
    if the user clicks in the visible image area.
    Last edited by anotherJEK; 03-27-2012 at 09:03 PM. Reason: new revision info


  •  

    Posting Permissions

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