0

2 つの div 要素をドラッグ アンド ドロップする簡単なコードを作成しましたが、うまく機能しますが、うまく機能しdiv 1ませdiv 2ん。マウスカーソルが正しく
立ちません。div 2

質問の下部にあるオンライン デモのリンクを確認してください。

HTML

<div class="draggable"></div>
<div class="draggable"></div>

CSS

div.draggable {
  background-color:yellowgreen; 
  width:150px; 
  height:100px; 
  border:1px solid #ffff66; 
  position:relative; 
}

JavaScript

var element = null;
var elemPosL = 0;
var elemPosT = 0;
var isMouseDown = false;

document.onmousedown = function(e) {
    element = e.target;
    if (element.className === "draggable") {
        elemPosL = e.clientX - element.offsetLeft;
        elemPosT = e.clientY - element.offsetTop;
        isMouseDown = true;
    }
};

document.onmousemove = function(e) {
    if (isMouseDown) {
        element.style.left = e.clientX - elemPosL + "px";
        element.style.top = e.clientY - elemPosT + "px";
    }
};


document.onmouseup = function() {
    isMouseDown = false;
    element = null;
};

オンラインでご覧いただけます

4

1 に答える 1

1

を使用position: absolute;すると修正されます。

相対的なものが必要な場合は、JavaScript で相対的に配置された要素にドラッグ アンド ドロップを実装するをチェックしてください。

于 2013-07-08T05:47:37.843 に答える