diff --git a/src/component/container/element-list.tsx b/src/component/container/element-list.tsx index db1e65050..d467a3f96 100644 --- a/src/component/container/element-list.tsx +++ b/src/component/container/element-list.tsx @@ -60,6 +60,16 @@ export class ElementList extends React.Component { onContextMenu: () => elementMenu(element), handleDragStart: (e: React.DragEvent) => { 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) => { const patternId = e.dataTransfer.getData('patternId'); diff --git a/src/lsg/patterns/element/index.tsx b/src/lsg/patterns/element/index.tsx index ee76f9bb5..e86cc530e 100644 --- a/src/lsg/patterns/element/index.tsx +++ b/src/lsg/patterns/element/index.tsx @@ -238,7 +238,7 @@ const Element: React.StatelessComponent = props => { active={active} /> )} - {title} +
{title}
{children && {children}}