SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question problems with drag n drop, IE and CBE

    Hello.

    I am using CBE 4.19.

    I have problems with dragging a div with IE.

    When i drag div, leave with the mouse the browser window, leave the mouse button and re-enter the browser window,

    the div is stickied to mouse.

    so i cant "drop" the div anymore.

    this problem only appears with IE, Netscape and Opera work "correct".

    this error occurs at the cbe drag examples too.

    any ideas?

    Markus

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Markus,

    The dragged element is not receiving a mouseup event to signal the end of the drag - the mouseup occurs outside of the window.

    After the mouse is stuck, dbl-click the element so it will get an extra mouseup - then it will be unstuck.

    Evidently, Opera and Gecko fire the mouseup event when the mouse leaves the window - but IE does not. IE does have a native drag event. Using this might be an alternative - but not what I'd call an 'easy work-around'. Especially since I try not to use browser-detection.

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    did you try to stop propagation and/or return false?

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Vinny,

    The dragged element doesn't know that the mouse has left the window. It only knows that it did receive a mousedown, but has not received a mouseup - so it thinks it's still being dragged. It doesn't know there's a need to cancel the drag...

    hmmm...

    Ok, I think this is it: The mousemove listener (cbeDragEvent) needs to check that (event.button == event.LEFT) and if it does not then cancel the drag.

    I'll have to look into it.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a modified cbeDragEvent() from the file cbe_event.js. This is working in the limited testing I've done. You have to detect IE because all browsers don't update event.button during the mousemove event. Needs more testing, but I think this may be a good change.
    Code:
    // 8-26-03, mf
    function cbeDragEvent(e) {
      if (cbeDragObj) {
        if (is.ie && e.button != e.LEFT) {
          cbeDragEndEvent(e);
        }
        else {
          e.dx = e.pageX - cbeDragObj.x;
          e.dy = e.pageY - cbeDragObj.y;
          cbeDragObj.x = e.pageX;
          cbeDragObj.y = e.pageY;
          e.type = 'drag';
          e.cbeTarget = cbeDragTarget;
          e.cbeCurrentTarget = cbeDragObj;
          e.eventPhase = cbeDragPhase;
          if (cbeDragObj.ondrag) cbeEval(cbeDragObj.ondrag, e);
          else cbeDragObj.moveBy(e.dx,e.dy);
          e.type = 'mousemove';
        }
      }
      e.preventDefault();
    }

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Ok. what is CBE 4.19? and where is the code you are looking at?
    Where the World Once Stood
    the blades of grass
    cut me still

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CBE is one of my dhtml libraries. Check my profile for the site addy.

  8. #8
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the answers.

    My idea is to write the drag movement event by myself and detect the mouse postition and stop dragging at the borders.

    Markus

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let us know how it goes

  10. #10
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yes it works

    "is.ie" is necessary, because without, opera dont drag anymore

    here is my Listener function

    (i have a scrollable div inside, so i only drag at the top of the div, so i have no probs with dragging and the scrollbar)

    function onDrag(e)
    {
    var cbe = document.getElementById('HILFE').cbe;

    var breite = e.pageX;
    var hoehe = e.pageY;

    breite = breite - cbe.left();
    hoehe = hoehe - cbe.top();

    //Maus auf grünem Balken UND Maustaste gedrückt (IE nerv)
    if (breite < 380 && hoehe < 20 && e.pageY > 2)
    {
    if (is.ie && e.button != e.LEFT)
    {
    //IE nerv
    }
    else
    {
    e.cbeCurrentTarget.moveBy(e.dx, e.dy);
    }
    }
    else
    {
    cbeDragEndEvent(e);
    }
    }


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
  •