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

Posted 2023-05-08

【中文标题】为啥我不能拖动跨度，而是拖动 img？

【英文标题】：Why am I not able to drag the span but instead the img?为什么我不能拖动跨度，而是拖动 img？

【发布时间】：2016-07-12 03:26:26

【问题描述】：

我正在尝试创建一个文本区域，我可以在其中添加应该可以在字符级别拖动的 html 元素。这个问题与to another I am currently asking 相关，但与 GWT 相关。为了创建这样一个文本区域，我正在尝试逐步了解如何进行操作。这是我到目前为止得到的：

JSFiddle

javascript：

function smartdrag(e) 

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

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

HTML：

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

【问题讨论】：

那么实际拖拽的代码在哪里呢？您可能正在使用某个库，是哪一个？

猜你每天都在学习！不知道 HTML5 有这个功能。

也许html5rocks.com/en/tutorials/dnd/basics 会有所帮助。 （图片默认可拖动）。

默认情况下，所有内容在 contenteditable 中都是“可拖动的”

@crl 这对我来说看起来有点危险 :) 它似乎有效，但它依赖于文本选择。我不确定是否每个浏览器都会对此感到满意。然而，这启发了我。 This one 将很简单，如果我可以将实际元素移动到该位置并防止浏览器创建拖动元素的“裸”副本，那么这正是我所需要的。知道这是否可能吗？

【参考方案1】：

我搜索了一下以了解 HTML5 拖动的工作原理，我发现为了让 DOM 元素可拖动，您必须为其添加新的 'draggable' 属性，并将其设置为 true。您的问题令人困惑的部分是图像和链接是draggable by default！

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

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

【讨论】：

您是否在 JSFiddle 中测试了我的脚本？这应该确实有效。我知道这个draggable 属性，而我的问题不是让事情可拖动。我的问题是将它们放在文本区域中它们在一起的字符之间。我已经看到了您展示的示例，但我无法在此处将其用于我的特定任务：/