Перетаскивание не перемещает элементы, если вы хотите, чтобы элемент перемещался при его перетаскивании, вам нужно установить новую позицию элемента в событии перетаскивания.Я сделал пример , который работает в Firefox и Chrome, вот ключевые моменты:
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
Событие dragstart определяет смещение указателя мыши слеваи верх элемента и передает его в dataTransfer.Я не беспокоюсь о передаче идентификатора, потому что на странице есть только один перетаскиваемый элемент - без ссылок или изображений - если у вас есть какой-либо из этих элементов на вашей странице, вам придется проделать здесь немного больше работы.
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
}
Событие drop распаковывает смещения и использует их для позиционирования элемента относительно указателя мыши.
Событию dragover просто нужно preventDefault, когда что-либо перетаскивается.Опять же, если на странице есть еще что-то перетаскиваемое, вам может потребоваться сделать что-то более сложное здесь:
function drag_over(event) {
event.preventDefault();
return false;
}
Так что свяжите это с document.body вместе с событием drop, чтобы захватить все:
var dm = document.getElementById('dragme');
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
Если вы хотите, чтобы это работало в IE, вам необходимо преобразовать aside в a элемент, и, конечно, весь код привязки события будет другим.Насколько мне известно, API перетаскивания не работает ни в Opera, ни в любых мобильных браузерах.Кроме того, я знаю, что вы сказали, что не хотите использовать jQuery, но кросс-браузерная привязка событий и манипулирование позициями элементов - это то, что jQuery делает намного проще.