Question

我希望用户能够在页面周围拖放图像。到目前为止我写了以下代码

JavaScript

var curr_elem = false,
    dmx = 0,
    dmy = 0;

document.ondragover = function (evt) {
    evt = evt || window.event;

    dmx = evt.pageX;
    dmy = evt.pageY;
};


var elem = document.getElementsByTagName('img')[0];

elem.addEventListener('click', function (ev) {
    curr_elem = ev.target;
    return false;
});

elem.addEventListener('dragstart', function (ev) {
    ev.stopPropagation();
    ev.cancelBubble = true;
    return false;
}, false);

elem.addEventListener('drag', function (ev) {
    ev.target.style.opacity = 1;
    ev.target.style.left = (dmx - ev.target.offsetWidth / 2) + 'px';
    ev.target.style.top = (dmy - ev.target.offsetHeight / 2) + 'px';
    ev.stopPropagation();
    ev.cancelBubble = true;
    return false;
}, false);

elem.addEventListener('dragend', function (ev) {
    console.log(ev.target.style.left, ' : ', ev.target.style.top);
    curr_elem = ev.target;
});

CSS

img {position: absolute;}

HTML

<img src="http://i.imgur.com/oi2T1dw.jpg" alt="" />

拖动代码工作正常（http://jsbin.com/EJuQoTuM/1/edit），但它有一个轻微的视觉问题。我不希望默认的淡化拖动副本显示在拖动的<img>上方。

P.S。我试图在没有jQuery的情况下进行学习。

Answer 1

如果使用DIV父

怎么办？

 <html>
<head>
<style type="text/css">
div{position:absolute;}
</style>
</head>
<body>
<div><img src="http://i.imgur.com/oi2T1dw.jpg" alt="" /></div>
<script type="text/javascript">
<!--
var el= document.getElementsByTagName('div')[0];
var f=false;
el.addEventListener("mousedown",function(e){
    var e= e||window.event;
    start={x:e.x, y:e.y}
    f=true;
    e.stopPropagation();// prevent event bubble
},false);
el.addEventListener("mousemove", function(e){
    if(f==true){
        var e= e||window.event;
        end={x:e.x, y:e.y}
        el.style.top=(e.y-start.y)+"px";
        el.style.left=(e.x-start.x)+"px";
        e.preventDefault();
        e.stopPropagation();// prevent event bubble
    }
}, false);
window.addEventListener("mouseup", function(e){
    f=false;
},false);
//-->
</script>
</body>
</html>

防止淡入淡出的副本出现在JavaScript拖动中

1 个答案: