There's no good way to have a drag and drop email... here's the long-winded explanation of why you're stuck doing it the other way:

A web page is made to be "responsive" by not declaring a specific width to elements, but declaring a percentage. Meaning, instead of declaring "600px wide" you instead say "70% of available space".

Drag and drop on a web page is usually fine, because elements are surrounded by <div> tags, which are more flexible. Think of them like blocks you can move around - you grab the whole <div> tag and its contents, and move it to another place, and it's all contained inside that <div>.

But THML email uses a table setup, because major email clients (like Outlook) can't handle the <div> tags. Can't handle them meaning positioning gets broken (web browsers are WAY ahead of email clients).

So in email, you're coding like the 1990s, and declaring that a "table row" is 70% of available width, and then cells inside that row are 33% of that width (this set-up gives you a 3-column layout).

Now, as table cells are moved around, they do not move all together the way divs can. They can't, because they're connected to rows, and other cells.

What is happening is that as you move things around in a drag and drop interface, behind the scenes the items you are moving will collect get extra layers of table cells and table rows - and in the end you have fully nested tables inside of table cells, inside of rows, inside of tables.

Maybe it looks good in the browser - but remember I said that browsers are way ahead of email clients...

So when you send the email it breaks because each table has a layer of padding and margin automatically added to it, and the email clients (which do not behave like browsers) will render every layer of that extra padding/margin.