div要素のドラッグ＆ドロップ

Question

イメージとテキストが内側にあるページに長方形div要素があります。 Divには実際に見えるように2ピクセルの境界線があります。

次に、div要素にdragstartイベントリスナーを追加します。 div内の画像をドラッグし始めると常にdragstartイベントが発生しますが、テキストスパンまたは空白の場所をクリックしてドラッグを開始すると問題が発生します。

Google Chromeのドラッグは非常に不安定です。それは数回働いて発砲をやめ、再びやり直すことができます。 Mozilla Firefoxではまったく動作しません。

これを修正して、divのバインドされた矩形内の任意のポイントをクリックしてドラッグできるようにするにはどうすればよいですか？

<div class="item"> 
    <img src="https://www.wigwam3d.com/previews/1f/1ffbf8da-a4d0-4e40-b9e1-0329220969dc.jpg"> 
    <div>Element</div> 
</div> 

Plunker：http://plnkr.co/edit/673ytif50cViE5dTv3df?p=preview

Answer 1

だけの簡単な解決策が見つかりました：DIV要素の真=ドラッグ可能な属性を追加します！それで全部です！

Answer 2

このコードを使用して、あなたは、ウィンドウ上のdivの任意の場所をドラッグすることができます。また、divの幅と高さを固定します。

$（関数（）{ $（ "＃アニメーション"）、CSS（{ "カーソル"： "移動"}）

// mousedown:fn(){dragging = true;} 


var dragging = false; 
var iX, iY; 
$("#animation").mousedown(function(e) { 
    dragging = true; 
    iX = e.clientX - this.offsetLeft; 
    iY = e.clientY - this.offsetTop; 
    this.setCapture && this.setCapture(); 
    return false; 
}); 

// mouseover:fn(){dragging = tru;} 

document.onmousemove = function(e) { 
    if (dragging) { 
     var e = e || window.event; 
     var oX = e.clientX - iX; 
     var oY = e.clientY - iY; 
     $("#animation").css({"left":oX + "px", "top":oY + "px"}); 
     return false; 
    } 
}; 

//のmouseup：FN（）{偽=ドラッグ。 }

$('#animation').mouseup(function(e) { 
    dragging = false; 
    this.releaseCapture && this.releaseCapture(); 
    e.cancelBubble = true; 
}) 

}）