не вычисляется значение

226

15 сентября 2017, 23:10

Не вычисляются переменные pozblx и pozbly которые должны представлять собой позицию блока div,после исполнения pozblx и pozbly принимают предустановленые координаты блока div , raznx и razny вычисляются правильно , как можно вычислить pozblx и bozlby ?

 e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
     e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
 var x = e.pageX;
 var y = e.pageY;
var raznx = x - div.offsetLeft;
var razny = y - div.offsetTop;
var pozblx = x - raznx;
var pozbly = y - razny;
div.style.left = pozblx + "px";
div.style.top = pozbly + "px";
div.innerHTML = raznx+":"+razny +'\n' +pozblx+":"+pozbly;

Answer 1

На листке бумаги подставьте выражение для raznx в выражение для pozblx. Что получится?

var pozblx = div.offsetLeft;

Answer 2

Решено Передвижение без jQuery

function moved(e) {
    var id=this.ide;
    var xc = this.xcor;
    var yc = this.ycor;
    var div = document.getElementById(id);
    var html = document.documentElement;
     var body = document.body;
  
     e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
     e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
     var x = e.pageX;
     var y = e.pageY;

    div.style.left = (x-xc) + "px";
    div.style.top = (y-yc) + "px";
    div.innerHTML =  "xy"+x+":"+y+'\n'+xc+":"+yc;
}
function move(ide,x,y) {
    var x = x;
    var y = y;
    var id=ide.id;
  document.addEventListener('mousemove',{handleEvent: moved, ide:id, xcor:x, ycor:y});
}
function stop() {
  document.removeEventListener('mousemove', moved);
}

<div class="div1" id="div1" style="background: red; left: 300px; top: 300px; width: 100px; height: 100px; position: absolute;" onmousedown="move(this,event.pageX-document.getElementById(this.id).offsetLeft,event.pageY-document.getElementById(this.id).offsetTop)"></div>