30

JavaScript を使用して画面上で画像をドラッグしようとしています。テキストを含む div で正常に動作するスクリプトを既に作成しましたが、画像で使用すると非常に断続的に動作します。

コードを jsfiddle に置いたので、他の人が私の意味を理解できるようになりました。 http://jsfiddle.net/laurence/YNMEX/

実行すると、テキストブロックをドラッグアンドドロップできることがわかりますが、画像で同じことをしようとすると、画像が残ります。マウスの動きに画像が追いつかない感じです。

以下のjsfiddleでコードを繰り返しました：

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;
}
.dragme {
  position: relative;
  width: 270px;
  height: 203px;
  cursor: move;
}

#draggable {
  background-color: #ccc;
  border: 1px solid #000;
}
<div id="draggable" class="dragme">"Hello World!"</div>
<img src="https://picsum.photos/270/203" alt="drag-and-drop image script" title="drag-and-drop image script" class="dragme">

4

4 に答える 4

15

return false関数の最後に追加するだけでstartDrag、ブラウザーがクリック イベントを処理しないようにできます。

于 2013-08-01T11:26:20.513 に答える
12

また、 andtargのみに割り当てる必要があります(var なし):startDragglobal

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>
于 2014-07-01T13:27:47.647 に答える
10

関数e.preventDefault();の最後に追加できますstartDrag

于 2013-08-01T11:36:35.803 に答える
0

ドラッグ イベントの特定の要素をバインドします。

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);
于 2018-01-06T15:02:05.223 に答える