为什么我无法拖动跨度，而是使用img？ [英] Why am I not able to drag the span but instead the img?

问题描述

我正在尝试创建一个textarea，在其中添加应在人物级别可拖动的HTML元素。这个问题是相关的另一个我目前问，但这是GWT相关。为了创建这样的文本区域，我试图了解如何一步一步做到这一点。这是我到目前为止：

JSFiddle

JavaScript：

  function smartdrag（e）{ 
 
 var id = e.target.getAttribute（'id'）; 
 
 if（id！=='plzdragme'&& id; =='plzdragmeimg'）{
 e.stopPropagation（）; 
 e.preventDefault（）; 
 return; 
 
 
 $ / code $ / pre 
 $ b 
 HTML： 
 
 
 < div contenteditable =trueondragstart =smartdrag（event）> 
 More blah 
< img src =http://lorempizza.com/80/80/2id =plzdragmeimgdraggable =trueclass =fancy-img/> 
约
< span id =plzdragmecontenteditable =falseclass =fancydraggable =true> DRAGME< / span> 
斯巴达！ 
< / div> 
  
但由于某些原因，我只能将 img 。我真正需要的是能够拖动 span ，或者甚至更好地拖动 div  .. 
 
 
 
我该如何做到这一点？
 
 
 
 PS：如果可能请不要使用jQuery。 
 
解决方案
我搜索了一下HTML5拖动的工作原理，发现为了让DOM元素可拖动，您必须添加新的可拖动属性，并将其设置为true。关于您的问题的令人困惑的部分是，图像和链接默认为可拖动！
 
 
 
我没有真正能够测试这个，因为你的脚本会抛出一个错误，说你的函数 smartdrag 不存在。 / p> 
 
 
尽管我对这个可能的解决方案充满了希望，因为它完全覆盖了您的问题，并且来自可靠的文档。
 
I am trying to create a textarea where I can add HTML elements which should be draggable on character level. This question is related to another I am currently asking but that is GWT related. In order to create such a text area I am trying to understand how to do it step by step. This is what I got so far:

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>
But for some reason I can only drag the img. What I actually need is to be able to drag a span or even better a div.. 

How can I accomplish that?

PS: Please no jQuery if possible.
解决方案
I googled around a bit to see how HTML5 dragging works, and I found that in order to get a DOM element to be draggable, you have to add the new 'draggable' attribute to it, and set it to true. The confusing part about your problem is that images and links are draggable by default!

I wasn't really able to test this well because your script throws an error saying your function smartdrag does not exist.

Though I'm pretty hopeful about this possible solution as it covers your problem entirely, and comes from a trustworthy documentation.

                        
这篇关于为什么我无法拖动跨度，而是使用img？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！