#175 new

Flicker on dropOnEmpty tag

Reported by Sumita | February 23rd, 2009 @ 11:31 AM

I have a horizontal sortable with three images arranged horizontally in a div (images in a div tag). The moment I introduce dropOnEmpty:true, and I try to drop an image from another sortable, there is a flickering and the sortable is creates its own drop position.

As suggested by Tobias Gassmann in http://markmail.org/message/m6am... -- There is an if-statement in this function which has to be altered:

the original line in Version 1.8.1 of scriptaculous reads: --> " if(!Element.isParent(dropon, element)) {"

changing this line to --> " if((!Element.isParent(dropon, element)) && (Element.empty(dropon))) {" turned the flickering off.

This can only be used, in case there are no other html-elements in the empty "Drop-On"-Element. Otherwise it remains undroppable.

The reason for the flickering is (as far as I figured it out) the Element.isParent(dropon,element) returning false, even when the dragged item is still within it's original parent. By checking wether the underlying Droppable is really empty (and therefore not the home- droppable, where the dragged item came from), we can assure that the onEmptyHover-Code is not executed falsely.

Can you please fix the issue or let me know what can be done overcome it.

Comments and changes to this ticket

  • Sumita

    Sumita February 23rd, 2009 @ 01:18 PM

    Added sample file below .. same issue with 1.8.2 stable release

  • Sumita

    Sumita February 23rd, 2009 @ 01:22 PM

    Comments by James McBryan in the forum "Looking into the code a bit more, I believe the fix is the correct solution for the onEmptyHover function.

    As for the reason why there is flickering is because the onEmptyHover was being toggled for Sortables even though there are items in the list. And as an item is moving through a list, the onHover function of the elements themselves are also toggled. So in essence 2 events with different actions are being fired off subsequently nearly every time the mouse moves in the list. In a picture the actions look like this:

    ------------------------------- | onEmptyHover | | --------------- | | | onHover | | | --------------- | | | -------------------------------

    Tobias' solution stops this dual events from happening and works as the "dropOnEmpty" suggests. Good work! "

  • Sumita

    Sumita March 3rd, 2009 @ 10:00 AM

    • Assigned user changed from “Juriy Zaytsev” to “ronin-15560 (at lighthouseapp)”
  • Amol Agarwal

    Amol Agarwal March 3rd, 2009 @ 10:55 AM

    I was having same problem in my application.

    The solution has fixed the flickering problem but now when I drag any image from one div to other, the image is copied only when I hover the image onto an existing image.

    When I drag image into the empty area of an non-empty div, the image slide back to home-parent div.

    Any suggestions???

  • Harry

    Harry September 2nd, 2009 @ 12:26 AM

    Hi, I'm having the same problem as Amol. I was wondering whether anyone had any suggestions.

  • stylpe

    stylpe April 25th, 2010 @ 06:35 PM

    I had a similar problem with flickering when I enabled dropOnEmpty, here is my example:

    I found a solution: If I removed the p element wrapping the text inside the li, thus putting the text directly in the li, it doesn't flicker. I haven't checked if this happens with any type of child element, but maybe this can help create a fix :)

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket