Drag & drop from cell in Grid A to cell in Grid B

#1

HI all

I’m wanting to sexy up an app of mine and would like to mouse click on a cell in “Grid A” and drag the cell contents visually over the screen to a cell in “Grid B”. I was working on a label appearing on “mousedown” and moves with mouse and disappears on “mouseup” of receiving grid.

I’ve got the label "dropping on to the receiving grid cell ok. My problem is when I mousedown on the data source grid, I can get the cell info and set the label correctly, and move the label to where the cell is, but I currently need to release the mouse and select the label to drag it. I would like to drag the label from the first mousedown event. Doable?

#2

Put the label container inside the draggable container. On mouse down unhide the label container. The label will automatically go with the draggable container and the on mouse up hide the label container.

You can alternately append the label container and remove it vs show/hide.

#3

I tried what I think you advised. Put a container on top of the grid? It moves nicely but how do I know which cell in the grid the user wants to drag? As the Grid_onmousedown is not being triggered now obviously.

#4

Can I use my app to embed a Label inside each cell in the grid? Then have that label drag outside the grid?

#5

Something like this…

<div id="dragable_grid" draggable="true" ondragstart="drag(event)" class="xyz">
    <div id="label1" style="display: none;" class="show_above">
        <p>show_above {margin_top: -1em;}</p>
    </div>
    <div id="grid1_contents" class="abc"></div>
</div>

To display the label, in your drag(event): 
$("#label1").show();

I did a little codepen for another user that you can play with, copy or use as you wish… https://codepen.io/PPetree/pen/MRXjGj

#6

Really appreciate the help PPeTree but I’m a bit clueless in Javascript and don’t really know what to do with your suggestion sorry. Learnt Basic and never needed to branch out further.

I’ve bypassed using a dragable label and am now using onmousemove,down,over etc with success. My only issue now is when the grid starts scrolling, moving the label off grid also scrolls the grid. How do you stop a grid from scrolling in code? Needs to scroll normally then when dragging the label off it needs to stay still.

#7

My last use of basic was GW Basic (which will make George laugh!) so I’m of no help in that regard but @AppStudioSupport is a whiz at it!

#8

What could be happening is that the event is bubbling up to the grid after being handled by the Label.

To stop that, put this code in your Label’s event handler:

event.stopImmediatePropagation()

where event is the argument passed to your event handling function.

#9

Thanks but I couldn’t get that to work.

I think I’m looking for the same answer as this post is looking for…

The event is Grid_onmousedown() which I have the code that Label.shows() and moves the label with the mouse cursor. What I think I need is the code to set Grid scrollY: &, scrollX: to false in Grid_onmousedown() then to true when the Label_onmouseup function calls.

#10

Grid_ref = new IScroll(Grid_scroller,{ scrollY: false, scrollX: false, freeScroll: false, mouseWheel:true, bounce:false, zoom:false, click:false,preventDefaultException:{tagName:/.*/}});

I got this to do the scroll disabling but it resets the grid back to row 0. Really needs to leave the grid where it is. Anyone know what might need doing to do that?