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

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

JavaScript:

function smartdrag(e) {

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

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

HTML:

更多废话
关于
德拉格姆
斯巴达！

但由于某些原因，我只能拖动

img

。我真正需要的是能够拖动

span

或更好的

div

我怎样才能做到这一点

---

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

我在谷歌上搜索了一下HTML5拖动的工作原理，我发现为了让DOM元素可以拖动，必须向它添加新的“draggable”属性，并将其设置为true。关于你的问题，令人困惑的是，图片和链接都是错误的

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

smartdrag

不存在

---

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

那么，实际拖拉的代码在哪里呢？你可能正在使用某个图书馆，哪一个？我猜你每天都在学习！不知道HTML5有这个功能。也许会有帮助。（默认情况下，图像是可拖动的）。默认情况下，图像中的所有内容都是可拖动的contenteditable@crl这对我来说有点危险：）它似乎有效，但它依赖于文本选择。我不确定是否每个浏览器都会对此感到满意。然而，这启发了我。如果我可以将实际元素移动到该位置，并防止浏览器创建拖动元素的“裸”副本，这将非常简单，也正是我所需要的。你知道这是否可行吗？你在JSFIDLE中测试过我的脚本吗？这应该是可行的。我知道这个

draggable

属性，我的问题是不能让事情变得可拖动。我的问题是将它们放在文本区域中的字符之间。我已经看到了您展示的示例，但我无法将其用于我的特定任务：/

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