feat(component): add drag image styling

src/component/container/element-list.tsx

@@ -60,6 +60,16 @@ export class ElementList extends React.Component {
 			onContextMenu: () => elementMenu(element),
 			handleDragStart: (e: React.DragEvent<HTMLElement>) => {
 				Store.getInstance().setDraggedElement(element);
+				e.dataTransfer.effectAllowed = 'move';
+
+				// restyle the drag image and move it somewhere invisible
+				var dragImg = e.currentTarget.querySelector('div').cloneNode(true);
+				dragImg.setAttribute(
+					'style',
+					'position: absolute; background-color: #fff; color: #000; padding: 1px 6px; border-radius: 3px; font-size: 12px; opacity: 1; top: 0; left: -500px;'
+				);
+				document.body.appendChild(dragImg);
+				e.dataTransfer.setDragImage(dragImg, 75, 10);
 			},
 			handleDragDropForChild: (e: React.DragEvent<HTMLElement>) => {
 				const patternId = e.dataTransfer.getData('patternId');

src/lsg/patterns/element/index.tsx

@@ -238,7 +238,7 @@ const Element: React.StatelessComponent<ElementProps> = props => {
 						active={active}
 					/>
 				)}
-				{title}
+				<div>{title}</div>
 			</StyledElementLabel>
 			{children && <StyledElementChild open={open}>{children}</StyledElementChild>}
 		</StyledElement>