Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #2641 (reopened defect)

Opened 3 years ago

Last modified 3 months ago

IE6 droppable "areas" seem to have a higher z-index then draggables

Reported by: jason@lifepowersales.com Assigned to: thomas@fesch.at
Priority: normal Milestone:
Component: script.aculo.us Version:
Severity: normal Keywords: drag and drop
Cc:

Description

Creating multiple Droppables has an interesting bug. (it is seen on the shopping cart demo, as well as http://www.lifepowersales.com/jason/month?month=1130828400 )

( version 1.5_pre1 )

scenario: You have a list of droppables 1, 2 and 3. along with draggable items within.

Challange: If you drag an item from droppable area 2 it will go "under" (zindex = something lower than) droppable #3. It works fine dragging over droppable 1. You can see this (again in ie6) on the shopping cart demo by trying to drag an item into the trash bin, it goes "behind" it.

if you look at my example of this, (the calander) you'll notice that every day is a droppable, but the grayed out (out of this month days) seem to allow the draggable element to go "over" those droppable zones. I achieved this by having a different class on the days within the month, and the days located outside the month. Then by adding z-index:1; on the days within the month it allows the grayed boxes (days outside this month) to work fine. I've yet to uncover a solution for the days within the month.

(look at the source to understand :) )

Thanks alot, Jason

Change History

11/14/05 12:01:28 changed by madrobby

  • status changed from new to closed.
  • resolution set to invalid.

The demo doesn't seem to be active. Also note that in HTML, z-indexes are stacking-context local (that means that there can be several stacking contexts on a single page). See http://www.w3.org/TR/REC-CSS2/visuren.html#z-index for more on this.

I'm closing this ticket, if you have more information please feel free to reopen it.

01/17/07 00:24:52 changed by dleute

  • status changed from closed to reopened.
  • resolution deleted.

This problem is definitely happening with the cart in I.E. Drag something into the cart: ( http://demo.script.aculo.us/shop )

Then pickup the item in the cart and drag it over the trash thing. notice how it's underneath the trash drop zone.

Second, I'm preparing a demo for my client at http://ewdemo.allofzero.com/journal.html

If you drag any of the food items in the calendar to any cell that's to the right or in a row beyond the one being dragged from, it goes underneath the drop zone. Everything still works but you can't see what you are dragging anymore.

I looked at this on another ticket as well. ticket:6232

04/02/07 11:55:18 changed by wyell

Hi, I'm having a very similar problem. Did you manage to fix it on your demo? I can't appear to replicate your bug in IE7.

04/02/07 15:49:09 changed by dleute

Unfortunately I have not fixed it. I created a workaround. You can still see the error on the demo shopping cart page:

http://demo.script.aculo.us/shop

If you drag something onto the cart and then do it again, further dragged items will be under the drop zone while dragging. (you may need to try dragging something out of the cart to see it). I don't have I.E. here right now so I can't giv specific intructions.

I "fixed" it by making my draggables be contained separately from my droppable. so instead of: 

<div class="droppable">
  <div class="draggable">drag me!</div>
  <div class="draggable">drag me!</div>
  <div class="draggable">drag me!</div>
</div>

I did: 

<div class="container">
  <div class="droppable">Meal Name</div>
  <div class="draggable">drag me!</div>
  <div class="draggable">drag me!</div>
  <div class="draggable">drag me!</div>
</div>

That is why meal titles currently repeat.

--Derrek

04/05/07 11:12:25 changed by wyell

Hi again.

Thanks for the reply.

I managed to solve my problem by using the Droppable 

onHover:function(element, dropon, overlap)

callback. If I set my Droppable z-index to -1 then the Draggable appears above the Droppable. I then re-set my z-index to its original value after the item has been dropped.

Wyell

04/04/08 18:26:28 changed by peterjtracey

This is fixed by removing the line: 

Element.makePositioned(element); // fix IE

from add.

However, that causes a worse problem in IE, every once in a (long) while a selection flashes on and off as the mouse is moved. Found a fix for that though - in Draggable.updateDrag add the line: 

	if (Prototype.Browser.IE) document.selection.clear();

right before Event.stop(event); That problem must have been the reason the makePositioned thing was added in the first place, I think this fix solves it more cleanly.

I'd submit a patch if I knew how to make one...