Our customer editors complained that they have problems with using drag and drop functionality of ContentArea. They quite often use Remote Desktop connection to access the edit mode. The placeholder for ContentArea dragged element is relatively small. With the combination of RDP display lags makes using this feature difficult.

ContentArea drag and drop small area

We decide to help them by increasing the drop area for ContentArea. We would like to achieve similar effect like in jQuery UI where size of drop placeholder is equals to regular item.

jquery ui drag and drop

I didn’t want to write a lot of custom code and prepare a separated widget to represent the drop area. That’s why I tried to simply change the layout using CSS. The drop area is top and bottom borders of a regular item. I increased the size from 1px to 30px.

Then I included custom CSS in a global module.config file. We need to add path to a custom styles Styles/CustomEditMode.css.

The result adding those two additional styles:

ContentArea drag and drop

Now when editor is sorting or adding new items and he need to place it between two existing items, the drop placeholder should be better accessible.