Хочу сделать перетягивания выбранного элемента списка по клику. Но возникает проблема, что бы перетянуть элемент нужно кликнуть два раза на него. А также нужно что бы при клике на элемент создавалась его копия, так как один элемент может использоваться несколько раз.
document.querySelector('#drag-training_1').addEventListener('click', function(e){
var id = e.target.id;
var el = document.getElementById(id);
var element = el;
element.onmousedown = function(e) {
element.style.position = 'absolute';
element.style.cursor = 'pointer';
moveAt(e);
document.body.appendChild(element);
element.style.zIndex = 1000;
document.onmousemove = function(e) {
moveAt(e);
}
element.onmouseup = function() {
document.onmousemove = null;
element.onmouseup = null;
}
element.ondragstart = function() {
return true;
};
function moveAt(e) {
element.style.left = e.pageX - element.offsetWidth / 2 + 'px';
element.style.top = e.pageY - element.offsetHeight / 2 + 'px';
}
}
});
Подробнее можно увидеть jsfiddle