HTML5 draggable and contenteditable

Handle for draggable element

https://github.com/jdiamond/html5-examples/blob/master/drag-and-drop/drag-handle.html

var target, allowedHandleSelector = '.drag-handle';
var onmousedown = function(e) {
    target = e.target;
};
var ondragstart = function(e) {
    if (!target.matches(allowedHandleSelector) {
        // prevent drag when target does not match handle selector
        e.preventDefault();
        return;
    }
    ...
};

Make draggable element and its flying ghost look differently

http://farhadi.ir/posts/the-story-behind-html5-sortable/

var ondragstart = function(e) {
    var $element = $(e.target).closest('.draggable');
    $element.toggleClass('drag-ghost', true);
    // modify element after creation of flying ghost
    setTimeout(function() {
        $element.toggleClass('drag-ghost', false);
        $element.toggleClass('dragging', true);
    }, 0);

    ...

};

Disable spell checking for contenteditable element

MDN - spell checking in HTML forms

MDN - spellcheck attribute

<div spellcheck="false" contenteditable="true">Editable content</div>

<div spellcheck="false" contenteditable="false">This content could be made editable</div>

300px limit

At least on Windows browser clips width of ghost (drag image) to 300x and applies radial opacity gradient: opacity of the image drops from 1 directly under the mouse cursor to zero at 300px distance.

Avoid nesting draggable and contenteditable attributes

Here be dragons!