javascript - 默认浏览器的拖动和移动功能

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 中更新图像的位置。

更具体地说，你必须抓住

• 鼠标按下
• 鼠标移动
• 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;
 });​

我会让你最终确定，以便更精确并使用开始拖动位置（提示：使用偏移量）。您还可以在鼠标按钮打开时删除 mousemove 事件处理程序。

Answer 2

要进行拖放，您需要 javascript，在 jquery 中，您可以使用 ui drag'n'drop：http: //jqueryui.com/demos/draggable/