Halten Sie die Maus innerhalb eines div

Ich habe ein div, sagen wir 100px,100px Abmessungen onmousedown ich möchten verschieben Sie ein Objekt innerhalb dieses div-Element und die Maus sollte nicht überall sonst, außer das div so, dass meine Objekte, die sich in den div. Maus wird wieder normal onmouseup .

Was sollte der javascript-Code halten Sie die Maus innerhalb dieses div nur?

Sie können nicht den cursor bewegen oder stoppen Sie den cursor mit JS also vielleicht ist dies nicht möglich.
Diese Frage ist fast 5 Jahre her ist, gibt es eine aktualisierte Lösung?
vorgeschlagen von Calum, es ist nicht möglich, mit max, den wir kontrollieren können die inneren div-position, wenn es bewegt sich von äußeren div

InformationsquelleAutor Varun | 2011-04-20

javascript mouseevent

Es ist nicht möglich, kontrollieren Sie die Maus-position mit Javascript;, aber Sie können seine position, um das Objekt zu Steuern, dass Sie wollen... hier ein einfacher code, der fast hierzu:

<html>
<body>
<div id="divID" style="width: 100px; height: 100px; position: absolute; left: 250px; top: 300px; background: #000"></div>
<div id="divChild" style="width: 20px; height: 20px; color: #f00; position: absolute; background: #f00;"></div>
</body>
<script>
var div = document.getElementById("divID");
var divChild = document.getElementById("divChild");

mousepressed = 0;

function handleMyMouseMove(e) {
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    if(mousepressed) {
        divChild.style.left = mouseX + "px";
        divChild.style.top = mouseY + "px";
    }
}

function handleMyMouseDown(e) { mousepressed = 1; }
function handleMyMouseUp(e) { mousepressed = 0; }

div.addEventListener("mousemove", handleMyMouseMove, false);
div.addEventListener("mousedown", handleMyMouseDown, false);
window.addEventListener("mouseup", handleMyMouseUp, false);
</script>
</html>

ya sehr langsam, aber schätzen die Mühe gemacht... danke 🙂
Ab 2019 gibt es den Punkt Lock-API: developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

InformationsquelleAutor Elieder

4

Unmöglich, leider... oder glücklicherweise, wenn Sie denken, was für etwas Werbung machen könnte mit ihm.

Edit: gefunden diese Diskussion, wo jemand behauptet, einen Roman Abhilfe Bewegen Sie Die Maus Cursor Javascript
- netter link und schöne Anregung, die von unserer SO Kumpel, aber nicht das hier tun 🙁
- Diese Frage ist fast 5 Jahre her ist, gibt es eine aktualisierte Lösung?
InformationsquelleAutor Jim Blackler
3

Wie die anderen Jungs sagen, Sie können keine Einschränkung für das Maus-cursor auf einen bestimmten Bereich. Vielleicht ist das aber auch nicht, was Sie wollen. Blick auf das jQuery-UI-demo: Beschränken Der Bewegung. Es erzielt die gewünschte Wirkung durch das halten des inneren Objekts in der übergeordneten Objekts (siehe Kasten sagt: "ich bin darin enthaltenen meine Eltern").
```
<div class="draggable ui-widget-content">
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p></div>

<script>
$(function() {
    $( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
```
- ja!! ja!! ja!! ich will sowas nur... keine Ahnung, wie das zu erreichen ist in js???
- Sicher: laden Sie die jQuery UI-draggable Verhalten, gehen Sie zu jqueryui.com/download, klicken Sie auf "Deaktivieren Sie alle Komponenten" und wählen Sie dann "Ziehbar" Interaktion, und klicken Sie auf "Download". Dies gibt Ihnen die kleinste jQuery-UI-Paket mit der benötigten Funktionalität. Dann gehen Sie zurück zu der demo, die ich erwähnt, und klicken Sie auf "Quelltext Anzeigen" sehen Sie den Beispielcode, der die diese Bibliothek nutzen, erreicht das, was Sie brauchen.
- Sie müssen 2 js Dateien aus der zip in Ihre Seite (js\jquery-1.5.1.min.js und js\jquery-ui-1.8.11.custom.min.js).
- Ich habe einige Ausschnitte von js und html meine Antwort, um Sie zu führen. Beachten Sie, dass darunter eine große lib wie jQuery UI in Ihre Seite ein nur für diesen Effekt ist nicht sehr ermutigend, aber ich habe das Gefühl, Sie werden viel mehr von es von nun an.
InformationsquelleAutor miguelv

wenn Sie möchten, eine kreative Lösung, heres ein, dass youl finden, sehr kreativ:

1: verwenden Sie [element].requestPointerLock()

2: erstellen Sie ein neues Bild mit einem Mauszeiger. (hier ist eine, die Sie mögen)

3: erstellen von 2 neuen Variablen x und y, und verriegeln Sie die position des Bildes zu Ihnen.

4: schreiben:

document.addEventListener('mousemove', function(){
     x += window.movementX;
     y += window.movementY;
});

5: geben Sie einige if-Anweisungen zu halten, die Maus-Bild in das element. stellen Sie sicher, dass die if-Anweisungen " innerhalb der eventlistener oben:

document.addEventListener('mousemove', function(){
     x += window.movementX;
     y += window.movementY;

     if(x < parseFloat(element.style.left)){
            x = parseFloat(element.style.width);
     }
     if(x > parseFloat(element.style.left) + parseFloat(element.style.width)){
            x = parseFloat(element.style.width) + parseFloat(element.style.width);
     }
     if(y < parseFloat(element.style.top)){
            y = parseFloat(element.style.top);
     }
     if(y > parseFloat(element.style.top) + parseFloat(element.style.height)){
            y = parseFloat(element.style.top) + parseFloat(element.style.height);
     }
});

stellen Sie sicher, dass Sie ersetzen "element" mit dem Namen der Variablen speichern Ihrem element, wenn Sie beabsichtigen, mit genau diesem code.

und vergessen Sie nicht, aktualisieren Sie die position des Elements durch zuweisen von x-und y Ihre position jedes mal, wenn Sie es verwenden. versuchen Sie den folgenden code ein. es hat all diese Schritte umgesetzt und getestet. klicken Sie einfach auf den Bildschirm, um zu starten, und drücken Sie [Esc], um es auszuschalten.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>New webpage</title>
    </head>
    <body>
        <img id="div" src="https://b.sccpre.cat/mypng/small/51-    518482_mouse-svg-cursors-mac-transparent-background-mouse-cursor.png" alt="hi"     style="position: absolute; width: 20px; height: 20px;">

        <div id="cage" style="width: 200px; height: 200px; background-    color: lightgray; left: 0px; top: 0px;">


        </div>

    <h1 id="tx">click to start</h1>


    </body>
    <script>
        var d = document.getElementById('div');
        var tx = document.getElementById('tx');
            document.addEventListener('click', function(){
var txt = tx.textContent;
        if(txt === "click to start"){
                    d.requestPointerLock();
            tx.textContent = "click to stop";
        }
        if(txt === "click to stop"){
            document.exitPointerLock();  
            tx.textContent = "click to start";
        }    
    });

        var x = 0;
        var y = 0;


        var cage = document.getElementById('cage');

        document.addEventListener("mousemove", function(e){
            x += e.movementX;
            y += e.movementY;

            if(x < parseFloat(cage.style.left)){
                x = parseFloat(cage.style.left);
            }
            if(x > parseFloat(cage.style.left) +         parseFloat(cage.style.width)){
                x = parseFloat(cage.style.left) + parseFloat(cage.style.width);
            }
            if(y < parseFloat(cage.style.top)){
                y = parseFloat(cage.style.top);
            }
            if(y > parseFloat(cage.style.top) + parseFloat(cage.style.height)){
                y = parseFloat(cage.style.top) + parseFloat(cage.style.height);
            }
            d.style.left = x + 'px';
            d.style.top = y + 'px';

        });

    </script>
</html>

InformationsquelleAutor person the human

0

können Sie nicht kontrollieren, die Mausposition mit javascript, die einzige Sache, die Sie tun können, ist zu Lesen, die Maus-position und darauf zu reagieren. Vielleicht können Sie die div, so dass es immer unter der Maus?
- lol, das wäre eine erstaunliche Arbeit um, obwohl. Stell dir vor, du bist platzieren Sie ein Objekt auf einer Karte, und wenn Sie den Bildlauf mit dem Objekt der Karte jagt Sie!
InformationsquelleAutor Florian
0

Können Sie nicht beschränken Sie die Maus.

Aber wenn Sie einschränken möchten ein anderes Objekt (zum Beispiel eine, die gezogen wird, indem die Maus) Sie können. Aber Sie brauchen mehr Informationen, was und wie Sie versuchen zu tun..

InformationsquelleAutor Gabriele Petrioli
0

Ist das völlig unmöglich, und Sie sollten dankbar dafür sein. Ihre Maus ist in Ihrem system das primäre Eingang, und wenn die Browser waren in der Lage zu kontrollieren oder zu requirieren, es gibt praktisch nichts, was eine Seite nicht tun konnte.

Es ist jedoch möglich, zu beschränken, ein gezogenes Objekt innerhalb eines anderen DIV - jQueryUI ' s draggable(), zum Beispiel, macht das unglaublich einfach.

InformationsquelleAutor Winfield Trail
0

Scheine ich gefunden zu haben, der einen workaround für mein Projekt.

Habe ich Folgendes:

1. Mit dem CSS deaktivieren der Standard-click-Ereignis für jedes element in Ihrem Dokument.

2. Für den Körper: cursor:none;.

3. Eine position:fixed; div Funktion als pseudo-Maus.

4. JQuery verwenden, um track-Maus Geschwindigkeit und damit poisition Ihre pseudo-Maus.

5. Von dort aus arbeiten.

Warnung: Ihre real Maus noch funktionieren, die normalerweise außerhalb Ihrer Webseite. Meine Absicht war nicht erforderlich, dass Sie auf eine Komponente und damit gearbeitet.

InformationsquelleAutor Ryan Dsouza

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.