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>