Drag and drop

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');

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>

It basically states that you can type anywhere except in the current existing tags. The goal here is to create tags once one finishes typing. A tag consists of a word and in order to add some functionality and style there must be added a around it. An event will be triggered when a user leaves the area. Now there is one problem with the $.html() and $.text() because they either provide too much information or too less.

<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"

This is an issue, the solution that I am currently using is get the $.html() and strip the from it by replacing them with a space. Next step is split the input on space and re-add the span tags.

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>');
}