Verschieben eines Bildes mit Javascript und Maus-events

Sollte dies einfach genug, aber jedes mal, wenn ich versuche, ich am Ende mit einem anderen Problem.

Ich versuche ein Bild auf dem Bildschirm mit der Maus-events wie mousedown, mouseup, mousemove, clientX und clientY. Ich bin dann zu versuchen, Sie auf die Bild mit der absoluten Positionierung.

Dachte ich, der code unten funktionieren würde, wie ich die Koordinaten auf die erste klicken und dann die Idee war, aktualisieren Sie Sie mit der Maus Bewegung, aber das funktioniert nicht.

var image;
var dog = document.getElementById("dogPic");
var cat = document.getElementById("catPic");

dog.addEventListener("mousedown", initialClick, false);
cat.addEventListener("mousedown", initialClick, false);




function initialClick(e) {
    var initialX = e.clientX;
    var initialY = e.clientY;
    image = document.getElementById(this.id);

    document.addEventListener("mousemove", function(e){

        var newX = e.clientX - initialX;
        var newY = e.clientY - initialY;  


        image.style.left = newX;
        image.style.top = newY;
    }, false);

}

Ich bin nicht Fragen, für eine vollständige Antwort, aber kann jemand mir direkt auf, wie kann ich Vorgehen ziehen Sie ein Bild auf dem Bildschirm mit der Maus Bewegung Ereignisse?

Dank

do #dogPic und #catPic haben Stil position: absolute;?

InformationsquelleAutor bcBorn | 2015-11-26

JS:

var dog = document.getElementById("dogPic");
var cat = document.getElementById("catPic");
var moving = false;

dog.addEventListener("mousedown", initialClick, false);
cat.addEventListener("mousedown", initialClick, false);


function move(e){

  var newX = e.clientX - 10;
  var newY = e.clientY - 10;

  image.style.left = newX + "px";
  image.style.top = newY + "px";

  
}

function initialClick(e) {

  if(moving){
    document.removeEventListener("mousemove", move);
    moving = !moving;
    return;
  }
  
  moving = !moving;
  image = this;

  document.addEventListener("mousemove", move, false);

}

CSS:

#dogPic, #catPic {
  width: 20px;
  height: 20px;
  position: absolute;
  background: red;
  top: 10px;
  left: 10px;
}

#dogPic {
  background: blue;
  top: 50px;
  left: 50px;
}

HTML:

<div id="dogPic"></div>
<div id="catPic"></div>

Danke für diese Unendlich sind. Ich wusste, es war einfach, aber aus welchem Grund auch immer Los war etwa alles falsch. Dies ist, was ich versucht habe, zu versuchen.
Nitpick: moving sollte nicht eine Globale var; es wäre schöner zu speichern, bewegen, wie ein Daten-verschieben oder etwas Attribut auf das element.

InformationsquelleAutor Endless

Ich eine Modifikation, um eine realistischere ziehen Erfahrung. Dies erforderte das hinzufügen einer X-und Y-offset so, anstatt zu springen, wenn abgeholt, wird das Objekt scheint sich zu bewegen wie erwartet.

JS:

let gMouseDownX = 0;
let gMouseDownY = 0;
let gMouseDownOffsetX = 0;
let gMouseDownOffsetY = 0;

function addListeners() {
    document.getElementById('cursorImage').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
}

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

function mouseDown(e) {
    gMouseDownX = e.clientX;
    gMouseDownY = e.clientY;

    var div = document.getElementById('cursorImage');

    //The following block gets the X offset (the difference between where it starts and where it was clicked)
    let leftPart = "";
    if(!div.style.left)
        leftPart+="0px";    //In case this was not defined as 0px explicitly.
    else
        leftPart = div.style.left;
    let leftPos = leftPart.indexOf("px");
    let leftNumString = leftPart.slice(0, leftPos); //Get the X value of the object.
    gMouseDownOffsetX = gMouseDownX - parseInt(leftNumString,10);

    //The following block gets the Y offset (the difference between where it starts and where it was clicked)
    let topPart = "";
    if(!div.style.top)
        topPart+="0px";     //In case this was not defined as 0px explicitly.
    else
        topPart = div.style.top;
    let topPos = topPart.indexOf("px");
    let topNumString = topPart.slice(0, topPos);    //Get the Y value of the object.
    gMouseDownOffsetY = gMouseDownY - parseInt(topNumString,10);

    window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
    var div = document.getElementById('cursorImage');
    div.style.position = 'absolute';
    let topAmount = e.clientY - gMouseDownOffsetY;
    div.style.top = topAmount + 'px';
    let leftAmount = e.clientX - gMouseDownOffsetX;
    div.style.left = leftAmount + 'px';
}

addListeners();

HTML:

<div style="height:500px;width:500;background-color:blue;">
    <img src="http://placehold.it/100x100" id="cursorImage" ondragstart="return false;"/>
</div>

InformationsquelleAutor Trevor Agnitti

0

Super einfachen funktionierenden code mit Jquery. Live-demo: http://jsfiddle.net/djjL16p2/
```
<div id="content" style="margin-top: 100px">
    <img id="lolcat" src="http://obeythekitty.com/wp-content/uploads/2015/01/lolcat_airplane.jpg" style="height: 100px; width: 120px; position: absolute;" draggable="false" />
</div>
```
JS:
```
$("#lolcat").mousedown(function() {
    $(this).data("dragging", true);
});

$("#lolcat").mouseup(function() {
    $(this).data("dragging", false);
});

$("#lolcat").mousemove(function(e) {
    if (!$(this).data("dragging"))
        return;
    $(this).css("left", e.clientX - $(this).width()/2);
    $(this).css("top", e.clientY - $(this).height()/2);
});
```
- Ich würde sagen, es ist falsch, zu glauben, er ist mit jQuery oder haben sollten, es zu benutzen. dieser Kerl hat alles mit vanilla-javascript und beantwortet werden sollten, als solche
- Stimme ich dir zu. Meine Absicht mit der Antwort ist eine funktionierende Ansatz für die OP. Ich bin sicher, er ist in der Lage die Portierung zu Vanilla JS, es würde nur ein wenig Ausführlicher.
- Sorry, ich sollte sagen, ich kann nicht verwenden jQuery für diese. Danke für die Antwort obwohl
- Es gibt keine Notwendigkeit zu schreiben, alle diese code-es sei denn, man will den nicht benutzen, jqueryui. Bei letzterem brauchen Sie einfach nur die Zeile code: $('#lolcat').draggable();
InformationsquelleAutor apscience

Dieser code funktioniert nur mit plain javascript

JS:

function addListeners() {
    document.getElementById('image').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
}

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

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

function divMove(e){
    var div = document.getElementById('image');
    div.style.position = 'absolute';
    div.style.top = e.clientY + 'px';
    div.style.left = e.clientX + 'px';
}


addListeners();

HTML:

<div style="height:500px;width:500;background-color:blue;">
  <img src="http://placehold.it/100x100" id="image" />
</div>

InformationsquelleAutor stalin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.