Tag: frontend

Modern browsers come shipped with a lot of nice features in order to support drag and dropping. With only little help of javascript a lot of great tools can be built. But there is one downside, if for example you wished to have a lot of metadata then you’ll have to do that all by yourself. Also not all browsers transfer the same things on a drop event. For example Opera adds a meta tag to the beginning. Also some browsers keep the style from the source by adding it inline. (the horror for most fronteers) In order to do simple drag and drop, also being able to keep source data but defenitely not the styling, I had to get rid of these things.

Let’s start at the beginning. There are a few events that are used in drag and dropping. The drop event is used for, stating the obvious, dropping of the dragged content. The event handler contains the original dragged data in event.dataTransfer. This only works when you allow this property to be set. (assume jQuery, see code below) This dataTransfer contains the dragged data in several mimetypes. Almost always there are the ‘text/plain’ and ‘text/html’.

$.event.props.push('dataTransfer');
									

I know regex

One of the most simple solutions is by just using the ‘text/plain’ type in order to print the dragged content. This would be awesome when there is only plain text, since one of the requirements is to show images and keep the datastructure available, this is not a good solution.

After a few other solutions I came up with replacing the content by nothing. This requires writing a regex that matches the entire <meta…> tag and also one that matches with all style=”…”.

// remove meta tag (everything that matches <meta >) (webkit)
draggedHtmlData = draggedHtmlData.replace(/<meta(.*?)>/g, '');
// strip styles (everything that matches style="*")
draggedHtmlData = draggedHtmlData.replace(/style="(.*?)"/g, '');
									

The outcome is quite clean html that respects the original structure and attributes but does not include meta-tags or strange style attributes.

Bonus: creating tag list 
Assume the following html:

<div contenteditable="true">
    <span contenteditable="false">one</span>
    <span contenteditable="false">two</span>
    <span contenteditable="false">three</span>
</div>
									

<div contenteditable="true">
    zero
    <span contenteditable="false">one</span>
    <span contenteditable="false">two</span>
    <span contenteditable="false">three</span>
   four
</div>

$('div').text() returns "zeroonetwothreefour"
$('div').html() returns "zero<span contenteditable="false">one</span><span contenteditable="false">two</span><span contenteditable="false">three</span>four"
									

var tags, length;
tags = $('div').html().replace(/<(.*?)>/g, ' ');
tags = tags.split(' ');
length = tags.length;
for (var i = 0; i < length; i = i+i) {
    $('div').append('<span contenteditable="false">' + tags[i] + '</span>');
}