web-dev-qa-db-ja.com

JavaScriptクリックとドラッグでDivを動的に移動する方法

さて、それは簡単なはずです。既存のdivを取得し、ウィンドウ内のマウス位置に従って移動する必要があります。私はどこでも検索しましたが、それは同じことをするための過度に複雑な方法につながり、j-queryの使用を伴います。私がやろうとしていることのために厳密にjavascriptを使用する必要があります。

方法：

var mousePosition;
var div;

(function createDiv(){

    div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "blue";

    div.addEventListener('mousedown', handleKeyPressed, true);

    document.body.appendChild(div);


})();

function handleKeyPressed(event) {

    event.preventDefault();

    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    div.style.left = mousePosition.x;
    div.style.top = mousePosition.y;

    //alert("whoa!");

}
javascripthtmlonmousedown
26
StoneAgeCoder

もっとこのようなものを探していると思う

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

[〜＃〜] fiddle [〜＃〜]

42
adeneo

これがadeneoよりも滑らかかどうかを確認します。 [〜＃〜] fiddle [〜＃〜]

var m = document.getElementById('move');
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}

function move(e) {
    m.style.top = e.clientY + 'px';
    m.style.left = e.clientX + 'px';
};
6
jhyap

jqueryはデプロイがはるかに簡単です。あなたはそれを学びたくないと言って驚いています。

Jqueryファイルをローカルコンピューターに保存して、jquery機能を使用するためにインターネットを必要としないようにすることができます。

私の場合、ツールフォルダーに保存しました。だから、インターネットにいる必要はありません。

上記のすべてのjsのjsコードの多くの行では、1行だけが必要です。

 <script src="/common/tools/jquery-1.10.2.js"></script>
 <script src="/common/tools/jquery-ui.js"></script>

 <script>
   $(function() {
   $( "#mydiv_to_make_draggable" ).draggable();
   });
</script>
1
webzy

@adeneoの非常にうまく機能する答えを少し変更しました。すべてが関数で囲まれ、すべてのイベントがdivにアタッチされている場合、ライブラリの一部として使用できます。

Idを渡して次の関数を呼び出します。 divが存在しない場合は作成されます。

function drag_div(div_id){
var div;

div = document.getElementById(div_id);

if(div == null){
   div = document.createElement("div");
   div.id = div_id;
   div.style.position = "absolute";
   div.style.left = "0px";
   div.style.top = "0px";
   div.style.width = "100px";
   div.style.height = "100px";
   div.style.background = "red";
   div.style.color = "blue";
   document.body.appendChild(div);
}

div.addEventListener('mousedown', function(e) {
    div.isDown = true;
    div.offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

div.addEventListener('mouseup', function() {
    div.isDown = false;
}, true);

div.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (div.isDown) {
        div.mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (div.mousePosition.x + div.offset[0]) + 'px';
        div.style.top  = (div.mousePosition.y + div.offset[1]) + 'px';
    }
}, true);
}
1
minivip