为什么我不能拖动跨度，而是img？

Question

我正在尝试创建一个文本区域，在这里我可以添加HTML元素，这些元素应该可以在字符级别上拖动。这个问题与我目前正在问的另一个问题有关，但与GWT有关。为了创建这样一个文本区域，我试图了解如何一步一步地完成它。到目前为止，我得到的是：

JSFIDLE

JavaScript：

function smartdrag(e) {

    var id = e.target.getAttribute('id');

    if (id!=='plzdragme' && id !== 'plzdragmeimg') {
        e.stopPropagation();
        e.preventDefault();
        return;
    }
}

超文本标记语言：

<div contenteditable="true" ondragstart="smartdrag(event)">
    More blah
    <img src="http://lorempizza.com/80/80/2" id="plzdragmeimg" draggable="true" class="fancy-img"/>
    about 
    <span id="plzdragme" contenteditable="false" class="fancy" draggable="true">DRAGME</span>
    Sparta!
</div>

但是出于某种原因，我只能拖动img。我真正需要的是能够拖动一个span或者更好的一个div...

我怎样才能做到这一点？

PS：如果可能，请不要使用jQuery。

Answer 1

我在谷歌上搜索了一下HTML5拖动的工作原理，发现为了让DOM元素可以拖动，必须添加新的“draggable”属性，并将其设置为true。您的问题令人困惑的是，默认情况下，图像和链接是可拖动的！

我无法很好地测试这一点，因为您的脚本抛出一个错误，表示您的函数smartdrag不存在。

尽管我对这个可能的解决方案充满希望，因为它完全涵盖了您的问题，并且来自可靠的文档。