js项目--拖拽图片

鼠标可以拖拽图片,放在任何地方.

html代码:

<img src="bird.jpg" <span style="font-family: Arial, Helvetica, sans-serif;">id="box" style= "position:absolute"</span><span style="font-family: Arial, Helvetica, sans-serif;">></span>

js代码:

<script>
        window.onload = function(){
            var bird = document.getElementById('bird');
            var disX = 0;
            var disY  =0;
            bird.onmousedown = function(e) {
disX = e.clientX - bird.offsetLeft;
dixY = e.clientY - bird.offsetTop;
document.onmousemove = function(){
bird.style.left = e.clientX - disX +'px';
bird.style.left = e.clientY - disY +'px';
}
document..onmouseup = function(){
document.onmousemove = null;
}
e.preventDefault();
}}
</script>

主要是onmousedown按下时移动onmousemove图片,onmousemove减去的是鼠标距离图片的长度disX,就是图片移动的距离了.当onmouseup时onmousemove为null.

e.preventDefault.阻止浏览器默认行为.

2.第二种方法:

原理和上面的一样:

html代码:

//id是div了,会有冒泡的事件.

<div id="box" style="position: absolute;"><img src="bird.jpg" ></div>

js代码:

//addEventLestener,通过监听而获得,而为false可以去掉冒泡事件

<script>
        window.addEventListener('load',function(){
            var box = document.getElementById('box');
            box.onmousedown = function (e) {
                e= e||window.event;
                //e.offsetX是相对于父元素box的距离.
                var offsetLeft = e.offsetX;
                var offsetTop = e.offsetY;
                document.onmousemove = function(evt){
                    evt = evt||window.event;
                    //offsetLeft是相对于父元素来说的
                    box.style.left = evt.clientX - offsetLeft+'px';
                    box.style.top = evt.clientY - offsetTop+'px';
                    evt.preventDefault()?evt.preventDefault():evt.returnValue = false;
                }
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        },false);
    </script>