なぜ私はスパンをドラッグできないのですか？代わりにimgをドラッグできますか？

Question

文字レベルでドラッグ可能な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を入れないでください。

Answer 1

HTML5のドラッグがどのように動作するかを少し調べてみましたが、DOM要素をドラッグ可能にするには、新しい 'ドラッグ可能な'属性を追加してtrueに設定する必要があります。あなたの問題についての混乱する部分は、画像とリンクがdraggable by defaultです！

あなたのスクリプトがあなたの関数smartdragが存在しないというエラーをスローするため、私は実際にこれをうまくテストできませんでした。

私はあなたの問題を完全に網羅しているので、この可能な解決策についてかなり期待していますが、信頼できるドキュメントから来ています。