Javascript 默认浏览器的拖放功能

Javascript 默认浏览器的拖放功能,javascript,jquery,html,Javascript,Jquery,Html,我有一个图像,我希望能够通过在页面上拖动来移动它。据我所知,默认情况下,它应该可以在每个浏览器中工作,但由于某些原因,它不适合我。 这是我的页面: <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:

我有一个图像,我希望能够通过在页面上拖动来移动它。据我所知,默认情况下,它应该可以在每个浏览器中工作,但由于某些原因,它不适合我。 这是我的页面:

<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中的某些内容


谢谢

不,仅此操作无法移动图像。您必须侦听鼠标事件以更新javascript中图像的位置

更具体地说,你必须抓住

下面是一个非常原始的演示:

CSS:

Javascript:


为了更精确,我将让您最终确定并使用开始拖动位置提示:使用。您还可以在鼠标按钮打开时删除mousemove事件处理程序。

要进行拖放,您需要javascript,在jquery中,您可以使用ui拖放:

img {
 position: fixed;   
}​
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;
 });​