Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Drop inside a scrollable div in FireFox

    I'm having an issue when dragging and dropping inside a scrollable div.

    We have a rather complicated table placed inside a scrollable div (horizontal).
    Outside the div there are some Labels that can be dropped on labels inside the table.
    When using Firefox it seems that the 'droptarget' is not scrolled along with the table.
    The labels, their borders, their background colour, everything is scrolled correctly.
    But the area on which the Label can be dropped is not.

    I set a backgroundcolour on dropOver to indicate when the label can be dropped.
    See screenshots for an example.
    The div is a bit scrolled to the right.
    As you can see, if I try to drop on the left part of the label, it is not possible.
    On the right part of the label it is possible.
    If I would scroll some more to the side, then the 'droptarget' will scroll out of view.

    Some code:

    The Labels are first declared as a class:
    Code:
    	isc.defineClass("CellLabel", "Label").addProperties({
			height:10,
			width: "150",
			align: "center",
			showEdges: false,
			border: "4px ridge #cccccc",
			canAcceptDrop: true,		
			drop: "onCellDrop(this)",
			dropOver: "this.setBackgroundColor('#ffff80')",
	    	dropOut: "this.setBackgroundColor('#CCCCCC')"
	})
    And then we create the Label in our table:
    Code:
    <script>
	                  isc.Canvas.create({
	                      position:"relative", width:1, height:1, 
	                      overflow:"visible",
	                       autoDraw:true,
	                      zIndex:0,
	                      children:[
				isc.CellLabel.create({
				    id:'<c:out value="${currentNode.id}"/>', 
			    contents:'<tme:techSpecObjectDescription object="currentNode" /> ',
				    click:"onCellClick(this)",
				    root:'<c:out value="${currentNode.root}"/>',	//boolean to indicate if this cell is the root or not (needed for validation)
			    techSpecId: '<c:out value="${techSpec.id}" />'
			})
                      ]
                  });
</script>


    I don't have a stand alone testcase yet.
    But I was wondering if somebody could point me in the right direction to fix this.
    Attached Files
    Tags: None
    #2
    Sorry, don't really follow what you're showing here, and it looks like a pretty involved problem in which the surrounding elements and the contents you are placing into the Label would have to be taken into account. Consider commercial support if you want help with this kind of use case.

    Comment

      #3
      Basically the problem is pretty simple: The labels scroll, but the target that accepts the drop not.
      It can be related to this problem: http://forums.smartclient.com/showth...ght=scroll+div
      It's the same jsp.


      [edit]
      Created a stand alone testcase that simulates the same problem.

      Try the code below in firefox.
      1) Try to drop moo on moo1: This works fine.
      2) Scroll so moo1 is no longer visible.
      -> Try to drop moo on moo2: No longer possible.
      3) Scroll so only half of moo1 is visible
      -> Drop only accepted on a part of moo2 (right half).

      Hope it makes more sense now.
      As you can see, there aren't much surrounding elements to take into account to recreate the problem.

      Code:
      <HTML><HEAD><TITLE>Simple RelPos Test</TITLE>

<SCRIPT>window.isomorphicDir='../../isomorphic/';</SCRIPT>
<SCRIPT SRC=isomorphic7RC2/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic7RC2/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic7RC2/system/modules/ISC_Containers.js></SCRIPT>

<SCRIPT SRC=isomorphic7RC2/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic7RC2/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic7RC2/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic7RC2/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY>

<script>
	isc.defineClass("TechSpecDimension", "Label").addProperties({
	        height: 50,
	        width:77,
	    	padding: 1,
	   	 	align: "center",
	    	valign: "center",
	    	wrap: true,
	    	showEdges: true,
	    	canDragRecordsOut: true,
	        canAcceptDroppedRecords: false,
	        canReorderRecords: false,
	        dragDataAction: "move",
	        canDragReposition:true,
	    	canDrop:true,dragAppearance:"target",
	    	zIndex:0
	})
	
isc.defineClass("CellLabel", "Label").addProperties({
    height:10,
    width: "100",
    align: "center",
    showEdges: true,
    canAcceptDrop: true,		
   
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#CCCCCC')"
})
</script>

<div style="overflow-x:scroll;width:300px;" >
            <script>
               
                        isc.TechSpecDimension.create({id:'foo', contents:'moo'})
               
            </script>
            <br /><br /><br />
<table width="800">
    <tr>
            <td>
            <script>
                isc.Canvas.create({
                    position:"relative", width:1, height:1, 
                    overflow:"visible",
                    autoDraw:true,
                    children:[
                        isc.CellLabel.create({id:'foo', contents:'moo1'})
                    ]
                });
            </script>
        </td>
                <td>
            <script>
                isc.Canvas.create({
                    position:"relative", width:1, height:1, 
                    overflow:"visible",
                    autoDraw:true,
                    children:[
                        isc.CellLabel.create({id:'foo', contents:'moo2'})
                    ]
                });
            </script>
        </td>
                <td>
            <script>
                isc.Canvas.create({
                    position:"relative", width:1, height:1, 
                    overflow:"visible",
                    autoDraw:true,
                    children:[
                        isc.CellLabel.create({id:'foo', contents:'moo3'})
                    ]
                });
            </script>
        </td>
        <td>
            <script>
                isc.Canvas.create({
                    position:"relative", width:1, height:1, 
                    overflow:"visible",
                    autoDraw:true,
                    children:[
                        isc.CellLabel.create({id:'foo', contents:'moo'})
                    ]
                });
            </script>
        </td>
        <td align= "left">
            SOME CONTENT FOR THE CELL
        </td>
    </tr>
</table>
</div>

</BODY>
</HTML>

      [edit2]
      Found a workaround for drag-drop
      If I change the dragIntersectStyle of the dragable object (in this case TechSpecDimension) to "rect" it seems to work in both IE and FF.

      But I just noticed that it seems to be a problem for all events.
      In our jsp we also set a click event on the CellLabel (calls to another javascript function).
      But when scrolled to the side, that function is not called in FireFox.
      So it seems to be related to the mouse coordinates or something like that.
      Last edited by Diether; 18 Jun 2010, 01:21.

      Comment

      Previous template Next
      Working...
      X