Форум

рони · #11 (**permalink**) 20.07.2016, 19:51

DivMan,

<!DOCTYPE html>
<html>

  <head>
<style type="text/css">
.con{
      position: absolute;
      width: 100px;
      height: 100px;
      background: green;
    }

</style>
    <meta charset="utf-8">
  </head>

  <body>

<button id="btn">Создать div</button>
  <script>var div2 = document.querySelector('.con')

function div(){
    var div = document.createElement('div');
    div.style.width='100px';
    div.style.height='100px';
    div.style.backgroundColor="green";
    div.setAttribute('class', 'con');
    document.body.insertBefore(div, document.body.firstChild);
div.addEventListener('mousedown', mDown);
    div.addEventListener('mouseup', mUp);
  }


  btn.onclick = div



  var activeElement;
  var offsetX = 0;
  var offsetY = 0;
  var con = document.querySelector('.con');


  var mDown = function(e){
    console.log('Нажали кнопку мыши',e)
    activeElement = e.target;
    offsetX = e.offsetX
    offsetY = e.offsetY
  }

  var mUp = function(e){
    console.log('Отпустили кнопку мыши')
    activeElement = null
  }



  var mMove = function(e){
    //console.log('Двигаем курсор', e)
    if(activeElement) {//если элемент есть, то есть на него нажали...
      activeElement.style.top = (e.clientY - offsetY) + 'px'
      //установить координату элементу top на текущее положение мышки
      //минус смещение
      //top от начала экрана до начала объекта
      activeElement.style.left = (e.clientX - offsetX) + 'px'
    }
  }
 /*
  if(div2.classList.contains("con")){
    alert('Блок создался')
  }



  con.addEventListener('mousedown', mDown);
  con.addEventListener('mouseup', mUp);*/
  document.addEventListener('mousemove', mMove);


</script>
  </body>

</html>

warren buffet · #12 (**permalink**) 20.07.2016, 19:57

Ебалайтен блин, все работает, вот так делается, то есть все что надо заранее определить - определяется, а потом уже выполняется.

var con=null,

activeElement,
offsetX = 0,
offsetY = 0,

mDown = function(e){
	console.log('Нажали кнопку мыши',e)
	activeElement = e.target;
	offsetX = e.offsetX
	offsetY = e.offsetY
},	
	
mUp = function(e){
	console.log('Отпустили кнопку мыши')
	activeElement = null
},	


mMove = function(e){

	if(activeElement) {
		activeElement.style.top = (e.clientY - offsetY) + 'px'
		activeElement.style.left = (e.clientX - offsetX) + 'px'
	}
};	


function div(){
	con=mk_div('con');
	con.addEventListener('mousedown', mDown);
	con.addEventListener('mouseup', mUp);
	document.addEventListener('mousemove', mMove);
}

function mk_div(rule){
	var div = document.createElement('div'),
	style=div.style;
	style.width='100px';
	style.height='100px';
	style.backgroundColor="green";
	div.className=rule;
	return document.body.insertBefore(div, document.body.firstChild)
}

btn.onclick = div;

warren buffet · #13 (**permalink**) 20.07.2016, 20:01

рони,
Сотона опередил )))

DivMan · #14 (**permalink**) 20.07.2016, 20:10

Получилось спасибо))

Форум

Справочник

Discord чат

Курсы javascript