ICEfaces
  1. ICEfaces
  2. ICE-9259

ice:panelGroup - Issue with defining dropTargetScrollerId

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.2.0.GA, 3.3
    • Fix Version/s: EE-3.3.0.GA, 4.0.BETA, 4.0
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      All
    • Assignee Priority:
      P1
    • Salesforce Case Reference:

      Description

      A draggable panelGroup has the 'dropTargetScrollerId' attribute set. With this set if the draggable item is dropped outside of this div the position of the item gets sent to the very top left of the page. Hovering over/around this item will snap it back to its original position.

        Issue Links

          Activity

          Hide
          Arran Mccullough added a comment -

          Attached test case and screen shot of this issue.

          Steps:

          • Load listTest.jsf
          • Click and drag one of the right items and drop it outside of its bordered panel.
          • Drag item will now move to the top left corner, sometimes it will infinitely scroll down the page.
          Show
          Arran Mccullough added a comment - Attached test case and screen shot of this issue. Steps: Load listTest.jsf Click and drag one of the right items and drop it outside of its bordered panel. Drag item will now move to the top left corner, sometimes it will infinitely scroll down the page.
          Hide
          Arran Mccullough added a comment -

          Attached screen shots showing the behavior with a ui:repeat tag.

          Show
          Arran Mccullough added a comment - Attached screen shots showing the behavior with a ui:repeat tag.
          Hide
          Arturo Zambrano added a comment -

          This is a very weird issue. First of all, if you make the 'rightDropArea' panel group a drop target (i.e. dropTarget="true"), then everything works normally. The TLD doesn't specify whether the component specified in 'dropTargetScrollerId' has to be a drop target or not, but by looking at the client side code (scriptaculous, specifically), it seems like it is assumed that the 'dropTargetScrollerId' element will be a droppable as well. Anyway, by looking at the code, it still should work, whether the 'dropTargetScrollerId' component is a drop target or not, but it doesn't work. The root cause is that it is not possible to set/update the 'scrollTop' and 'scrollLeft' properties of the container element when it isn't a drop target. I've made many tests, incuding setting pre-determined increments or fixed values to these properties, but they never update, even when displaying an alert right before and right after setting these properties. There's just no change. It is possible to change other properties like style.backgroundColor, and you can see it applied on the screen, but it's still not possible to change 'scrollTop' and 'scrollLeft'. I've also tried changing the 'overflow' property explicitly to 'scroll', but that just doesn't help.

          Show
          Arturo Zambrano added a comment - This is a very weird issue. First of all, if you make the 'rightDropArea' panel group a drop target (i.e. dropTarget="true"), then everything works normally. The TLD doesn't specify whether the component specified in 'dropTargetScrollerId' has to be a drop target or not, but by looking at the client side code (scriptaculous, specifically), it seems like it is assumed that the 'dropTargetScrollerId' element will be a droppable as well. Anyway, by looking at the code, it still should work, whether the 'dropTargetScrollerId' component is a drop target or not, but it doesn't work. The root cause is that it is not possible to set/update the 'scrollTop' and 'scrollLeft' properties of the container element when it isn't a drop target. I've made many tests, incuding setting pre-determined increments or fixed values to these properties, but they never update, even when displaying an alert right before and right after setting these properties. There's just no change. It is possible to change other properties like style.backgroundColor, and you can see it applied on the screen, but it's still not possible to change 'scrollTop' and 'scrollLeft'. I've also tried changing the 'overflow' property explicitly to 'scroll', but that just doesn't help.
          Hide
          Arturo Zambrano added a comment -

          It seems that the problem is fixed by making sure that we call Element.makePositioned() on the container element, when it's not a drop target itself.

          Show
          Arturo Zambrano added a comment - It seems that the problem is fixed by making sure that we call Element.makePositioned() on the container element, when it's not a drop target itself.
          Hide
          Arturo Zambrano added a comment -

          Committed fix at revision 35544.

          • Fix to prevent the draggable from scrolling forever in one direction
          • Fix to prevent the draggable to appear in the upper left corner when dropped outside the scrollable container
          • Adjusted default scroll sensitivity
          • Disabled revert visual effect when the draggable is in a scrollable container, due to multiple issues.
          Show
          Arturo Zambrano added a comment - Committed fix at revision 35544. Fix to prevent the draggable from scrolling forever in one direction Fix to prevent the draggable to appear in the upper left corner when dropped outside the scrollable container Adjusted default scroll sensitivity Disabled revert visual effect when the draggable is in a scrollable container, due to multiple issues.
          Hide
          Arturo Zambrano added a comment -

          Testing notes: It will be important to verify that no other parts of the draggable functionality are affected, especially regarding the different options: ghosting, revert, solid, dragGhost. Testing ice:panelPositioned is also advised.

          The issues reported in this JIRA are fixed. However, don't expect the draggable functionality to work as smoothly as that of jQuery. The draggable functionality in the compat components is based on scriptaculous, which is no longer maintained, and the last update was three years ago.

          The dropTargetScrollerId attribute is used when the container component is actually scrollable. This test app doesn't feature a scrollable container. So, this attribute is really unnecessary for this app. Perhaps it would be better to use a modified version that contains more draggable items in a scrollable container (i.e. its height isn't big enough to fit all children items, so the browser adds a scrollbar).

          Show
          Arturo Zambrano added a comment - Testing notes: It will be important to verify that no other parts of the draggable functionality are affected, especially regarding the different options: ghosting, revert, solid, dragGhost. Testing ice:panelPositioned is also advised. The issues reported in this JIRA are fixed. However, don't expect the draggable functionality to work as smoothly as that of jQuery. The draggable functionality in the compat components is based on scriptaculous, which is no longer maintained, and the last update was three years ago. The dropTargetScrollerId attribute is used when the container component is actually scrollable. This test app doesn't feature a scrollable container. So, this attribute is really unnecessary for this app. Perhaps it would be better to use a modified version that contains more draggable items in a scrollable container (i.e. its height isn't big enough to fit all children items, so the browser adds a scrollbar).
          Hide
          Arturo Zambrano added a comment -

          Closing issue again. The regressions reported above weren't caused by these fixes but by a fix made for ICE-9109, which is now being investigated in ICE-9303.

          Show
          Arturo Zambrano added a comment - Closing issue again. The regressions reported above weren't caused by these fixes but by a fix made for ICE-9109 , which is now being investigated in ICE-9303 .

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Arran Mccullough
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: