Question

我正在尝试使用JavaScript在屏幕上拖动图片。我已经编写了一个脚本，可以在带有文本的div上正常工作，但是当我在图像上使用它时，它会间歇性地工作。

我已将我的代码放在jsfiddle上，以便其他人可以看到我的意思。 http://jsfiddle.net/laurence/YNMEX/

如果您运行它，您会发现可以拖放文本块，但是当您对图像尝试相同的操作时，它会将图像留在后面。这就像图像无法跟上鼠标的移动。

我在下面的jsfiddle上重复了代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and drop</title>
<style type="text/css">

    .dragme {
        position:relative;
        width: 270px;
        height: 203px;
        cursor: move;
    }
    #draggable {
        background-color: #ccc;
        border: 1px solid #000;
    }
</style>
<script type="text/javascript">
        function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }

            // IE uses srcElement, others use target
            var targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'dragme') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if(!targ.style.left) { targ.style.left='0px'};
            if (!targ.style.top) { targ.style.top='0px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.onmousemove=dragDiv;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};
            var targ=e.target?e.target:e.srcElement;
            // move div element
            targ.style.left=coordX+e.clientX-offsetX+'px';
            targ.style.top=coordY+e.clientY-offsetY+'px';
            return false;
        }
        function stopDrag() {
            drag=false;
        }
        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;
        }


</script>

</head>
<body>
<div id="draggable" class="dragme">"Hello World!"</div>
<img src="flower.jpg" alt="drag-and-drop image script" 
 title="drag-and-drop image script" class="dragme">

Answer 1

只需在return false功能的末尾添加startDrag即可阻止浏览器处理点击事件。

Answer 2

同样targ只应在startDrag和global上分配（不含var）：

http://jsfiddle.net/gigyme/YNMEX/132/

<script type="text/javascript">
    function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }
            if(e.preventDefault) e.preventDefault();

            // IE uses srcElement, others use target
            targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'dragme') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if(!targ.style.left) { targ.style.left='0px'};
            if (!targ.style.top) { targ.style.top='0px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.onmousemove=dragDiv;
            return false;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};
            // var targ=e.target?e.target:e.srcElement;
            // move div element
            targ.style.left=coordX+e.clientX-offsetX+'px';
            targ.style.top=coordY+e.clientY-offsetY+'px';
            return false;
        }
        function stopDrag() {
            drag=false;
        }
        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;
        }
</script>

Answer 3

您可以在e.preventDefault();功能

的末尾添加startDrag

Answer 4

绑定拖动事件的特定元素。

function log() {
    var debug = true;
    if (!debug)
        return;
    if (arguments) {
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
}    

function Drag(element) {
    this.dragging = false;
    this.mouseDownPositionX = 0;
    this.mouseDownPositionY = 0;
    this.elementOriginalLeft = 0;
    this.elementOriginalTop = 0;
    var ref = this;
    this.startDrag = function (e) {
        e.preventDefault();
        ref.dragging = true;
        ref.mouseDownPositionX = e.clientX;
        ref.mouseDownPositionY = e.clientY;
        ref.elementOriginalLeft = parseInt(element.style.left);
        ref.elementOriginalTop = parseInt(element.style.top);
        // set mousemove event
        window.addEventListener('mousemove', ref.dragElement);
        log('startDrag');
    };
    this.unsetMouseMove = function () {
        // unset mousemove event
        window.removeEventListener('mousemove', ref.dragElement);
    };
    this.stopDrag = function (e) {
        e.preventDefault();
        ref.dragging = false;
        ref.unsetMouseMove();
        log('stopDrag');
    };
    this.dragElement = function (e) {
        log('dragging');
        if (!ref.dragging)
            return;
        e.preventDefault();
        // move element
        element.style.left = ref.elementOriginalLeft + (e.clientX - ref.mouseDownPositionX) + 'px';
        element.style.top = ref.elementOriginalTop + (e.clientY - ref.mouseDownPositionY) + 'px';
        log('dragElement');
    };
    element.onmousedown = this.startDrag;
    element.onmouseup = this.stopDrag;
}

var myDrag = new Drag(yourElement);// bind event
console.log(myDrag.dragging);

如何使用纯javascript在屏幕上平滑地拖动图像

4 个答案: