0

Не могу понять как можно сделать drag & drop, я уже делал с абсолютным позиционированием, но перетаскивать элементы я пока не умею.

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

2 ответа 2

0

Алгоритм примерно такой:

isDrag = false // переносится сейчас какой-то элемент или нет
dragElement = null // элемент, который переносим
// дальше просто вешаем обработчики событий на ДОКУМЕНТ
document.onmousedown = function (e) {
    // тут можно провести проверку, 
    // если drag элементы могут быть только определенными элементами
    dragElement = e.target;
    isDrag = true;
    // + добавляем стили для элемента и все такое
}
document.onmousemove = function (e) {
    if(!isDrag || !dragElement) return // если мы никуда не нажимали 
    // тут сам перенос
}
document.onmouseup = function (e) {
    isDrag = false;
    dragElement = null // обнуляем все
    // убираем стили
}

Самая проста реализация

2
  • Ну это понятно, спасибо) меня интересует вопрос стилей, ну например я изменю у элимента координаты,но как же сделать перенос элимента в другую колонку или типо того? нужно детектить то что я перенёс элимент в эту колонку и при отпускании мыши его туда сохранять и тд, как так делают? готовые решения меня не интересуют, я хочу просто научиться это делать)) 14 мая 2015 в 11:23
  • @WebWorkDeveloper, есть функция, которая определяет самый глубокий элемент, над которым находится мышка. То есть по координатам мышки, мы можем определить, на какой именно элемент она указывает. Так можно перемещать элементы из одной таблицы в другую например. Либо считать по координатам входит ли в область (например) таблицы область нашего элемента. (document.elementFromPoint(clientX, clientY) - метод который определяет элемент по координатам)
    – ThisMan
    14 мая 2015 в 13:01
0

Советую использовать проверенный jqueryui. В этом плагине имеется куча разных вкусных плюшек, а так же реализация draggable,

Пример тут.

3
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? По возможности, добавляйте код примера в тело ответа. 14 мая 2015 в 9:12
  • Я знаком с jqueryui, но под копотом у него нечто что тяжело связать, я просто не вижу алгоритма решения там( 14 мая 2015 в 11:24
  • А тебе для обучения или что бы работала? Если что бы работала, то по своему опыту лутче брать готовые рещения проверенные тысячей програмистов
    – zooblin
    14 мая 2015 в 12:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.