默認瀏覽器的拖動功能

Question

我有一張圖片，我希望能夠通過拖動頁面來移動。據我瞭解，它應該在每個瀏覽器默認工作，但由於某種原因，它不適合我。 這裏是我的網頁：

<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的東西嗎？

謝謝

Answer 1

不，你不能僅僅通過這樣做來移動圖像。你必須聽取鼠標事件來更新圖像在JavaScript中的位置。

更具體地說，你就必須抓住

• mousedown
• mousemove
• mouseup

這裏是一個非常原始的示範：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; 
});​ 

我會讓你爲了完成更精確和使用開始拖動位置（提示：使用offset）。你也可以在鼠標按鈕啓動時移除mousemove事件處理程序。

Answer 2

要做拖放，你需要JavaScript，並在jQuery中，你可以使用ui drag'n'drop：http://jqueryui.com/demos/draggable/