PLEASE NOTE: This Tech Tip applies to 4D Web 2.0 Pack v11 Release 1 (11.1)

The Image Matrix object within the 4D Ajax Framework was designed for the purposes of displaying images alongside live data, but was not necessarily designed for drag-and-drop. This however can be easily resolved by using HTML to create the content of our Image Matrix and then using the innerHTML property when a cell is dropped.

So for example, lets assume we have a Data Grid whose cells have been set to droppable and an Image Matrix whose cells have been set as draggable. We would need to use the following custom code to enable the drag-and-drop between these 2 objects.

1) During creation of the Image Matrix, create custom HTML and specify a class name for the element(s) that will contain the data:

var myContent = '<span class="fieldClassName">[table1]field1</span>'; myDataMatrix = new dataMatrix(targetNode, selectionName, header, imageField, myContent, zoomContents, layout, margin, zoomLevel, scrollMode, forceRows, forceColumns, allowCellMouseInteraction, maxCharNumber, skipQueryOnStart);

2) Use the following code to extract data from the dropped cell, when a cell from the Image Matrix is dropped onto a cell in the Data Grid:

var orginCell = dax_bridge.hover.Draggin.dragObjectSource; var sourceValue = getElementByClassName(originCell, 'fieldClassName').innerHtml;

For the latest information on the Image Matrix object please see the Daxipedia:

http://daxipedia.4d.com