problems with drag n drop, IE and CBE

[Volksbad]

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

[MikeFoster]

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.

[Vincent Puglia]

Hi,

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

Vinny

[MikeFoster]

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.

[MikeFoster]

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.

// 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();
}

[Vincent Puglia]

Hi,

Ok. what is CBE 4.19? and where is the code you are looking at?

[MikeFoster]

CBE is one of my dhtml libraries. Check my profile for the site addy.

[Volksbad]

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

[MikeFoster]

Let us know how it goes

[Volksbad]

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);
}
}