1

ページ上でドラッグして移動できるようにしたい画像があります。私が理解しているように、すべてのブラウザーでデフォルトで機能するはずですが、何らかの理由で機能しません。ここに私のページがあります：

<div style="position:relative;width:1000px; height:900px;border:solid;z-index:30;float:left">
    <div id="image-helper" style="position:absolute;width:1000px; height:900px;z-index:20;float:left" >
        <img id="image" src="images/test.jpg" style="width:500px;height:400px;cursor:pointer;z-index:10;" alt=""/>
    </div>
    </div>

cssで何かが足りないのですか?

ありがとう

4

2 に答える 2

0

いいえ、これを行うだけで画像を移動することはできません。JavaScriptで画像の位置を更新するには、マウスイベントをリッスンする必要があります。

より具体的には、キャッチする必要があります

これは非常に生のデモです: http://jsfiddle.net/dystroy/CvVte/

CSS :

img {
 position: fixed;   
}​

Javascript :

var mouseIsDown = false;
$('img').mousedown(function(e){
    mouseIsDown = true;
    pos = $(this).offset();
    e.preventDefault();
});
$(document).mousemove(function(e){
    if (!mouseIsDown) return;
    $('img').css({left:e.pageX, top:e.pageY});
 }).mouseup(function(){
     mouseIsDown = false;
 });​

より正確にするためにファイナライズを行い、開始ドラッグ位置を使用します (ヒント:オフセットを使用します)。また、マウス ボタンが押されたときに mousemove イベント ハンドラを削除することもできます。

于 2012-07-19T16:52:27.793 に答える
0

ドラッグ アンド ドロップを行うには、javascript が必要です。jquery では、UI のドラッグ アンド ドロップを使用できます: http://jqueryui.com/demos/draggable/

于 2012-07-19T16:53:03.903 に答える