Images, the Designer, and Drag and Drop - tooltwist/documentation GitHub Wiki

In Webkit browsers - Safari and Chrome - clicking on an image and moving the cursor allows dragging the image. This great for copying files to the desktop or file system, but breaks drag and drop in the Designer.

The solution is to add class ttDesigner-image to the image element that is rendered in Designer mode.

<img src="/a/b/c.png" class="ttDesigner-image">

If you are using the helper classes, then this does not work:

@Override
public void renderForDesigner(WbdGenerator generator, WbdWidget instance, UimData ud, WbdRenderHelper buf) throws WbdException {
	try {
		WidgetHtmlHelper.addDivStart(buf);
		WidgetHtmlHelper.addImage(buf, TOOLBOX_ICON);
		WidgetHtmlHelper.addDivStart(buf);
	} catch (Exception ex) {
		throw new WbdException("Error encountered on rendering widget: (" + ex.toString() + ")");
	}
}

The fix is like this:

@Override
public void renderForDesigner(WbdGenerator generator, WbdWidget instance, UimData ud, WbdRenderHelper buf) throws WbdException {
	try {
		WidgetHtmlHelper.addDivStart(buf);
		String otherAtrb = "";
		String className = "ttDesigner-image"; // Prevents the image being dragged, which breaks the Designer's drag and drop. 
		WidgetHtmlHelper.addImage(buf, TOOLBOX_ICON, otherAtrb, className);
		WidgetHtmlHelper.addDivStart(buf);
	} catch (Exception ex) {
		throw new WbdException("Error encountered on rendering widget: (" + ex.toString() + ")");
	}
}

Prerequisites

This fix works since ttWbd-8.4.0-20150307.042014-14.jar.

---