Drag Drop 'not-allowed' in IE for images

[PhillipS]

In both IE6 and IE7, when the draggable is an image, it is not easily
accepted in the droppable area.

When a user that is not very quick in dragging and dropping an image
into the container, his cursor will change to the 'not-allowed' state,
and he will not be able to drop the image (without beginning to drag
it again)

Here is some test code to try out this bug yourself: http://pastie.org/244429

Many thanks

(the test uses google's hosted prototype1.6 and scriptaculous1.8.1, so
you can use the test right out of the box)

[Diodeus]

I tried a few things to see if it would make a difference, like
changing UL to DIV. I also tries wrapping the image in a DIV and
making the DIV draggable instead of the image. Same result.

I put some text in the draggable and it worked properly. Go figure.

[jdalton]

jQuery UI doesn't suffer from this bug...
It seems to happen as the alt text is displayed.
You can still drop the image it just requires you to let go of the
drag and press the left click again...

- JDD

[PhillipS]

I've been hearing many good things about jquery, i'm just so far into
prototype and scriptaculous now it seems like it would be cumbersome
to switch. Although you can still drop the image if you let go and
click again, it's not a very intuitive solution for most of users.

thanks for your input

[PhillipS]

putting text in the draggable didn't work for me, could you post your
example?

[Diodeus]

No changes were made to the script

<div id="test_container">
<div class='draggable' style='color:#ffffff'
id='draggable_demo'>#####</div>
<h3>To reproduce this bug, in ie7 or lower drag an image into the
white container and hold it over the container for a few seconds</h3>
<h4>Observe that the cursor gets the 'not-allowed' state and dropping
cannot be resumed intuitively. Firefox and Safari behave
appropriately.</h4>

<div id="droppable_demo">
Drop here!
</div>

</div>

[jdalton]

:P

I wasn't suggesting using jQuery UI, more of
lets compare how they do it to see if we can spot
where Scriptaculous could be causing the issue.

- JDD

[PhillipS]

@Diodeus
You are correct that text works correctly, and that is the crux of
this issue... it works for text, but not for images (in ie7, ie6).

[PhillipS]

@jDalton
If the issue occurs when IE examines/renders the alt text, is there a
way to disable the alt text effectively? Removing the alt text itself
from the HTML breaks the whole dragging process for IE (I believe IE
requires alt text for images?).

On Jul 31, 9:37 am, jdalton <John.David.Dal...@gmail.com> wrote:

[Diodeus]

No, ALT is not required. I just removed the ALT attribute and it works
fine.

Interesting bug though. I think the browser must be moving the focus
to the ALT overlay.

[PhillipS]

I just tried something that seems to work. Don't remove the alt text
but set it to blank: alt=""
for my case this works

[PhillipS]

@Diodeus
you are correct, removing the alt text is also a legitimate way to
resolve the bug

[.Net2Php]

Removing alt text causes accessibility issues, though. For example,
blind people depend on the alt text so their screen readers can read
aloud to them what the image is about.

[nimesh]

It's not the right solution. I'm using ruby on rails application. and
i've used :alt=>"" in my image tag. but in IE7 once i drag and drop
the image it works fine but then i can't drag the other image.

> > > > > - JDD- Hide quoted text -
>
> - Show quoted text -

[Jennifer]

I'm getting this in IE7, too, despite setting my alt and title to "".
I also found a two-year-old bug report on the issue:
http://dev.rubyonrails.org/ticket/5274. Anyone have any other work-
arounds to suggest? I haven't been having much luck.