Собственный javascript, эквивалентный jQuery.draggable ()

Question

Есть ли нативный код javascript, эквивалентный jQuery, перетаскиваемому? Мне не нужны все функции, но

1. возможность перетаскивать модальное окно из ручки.
2. в начале и в конце события, как мне нужно сделать слой наложения при перетаскивании, чтобы предотвратить мышь находится на фрейме внутри модального окна.
3. в документе будет только один перетаскиваемый элемент.

Answer 1

Используйте события dragstart и dragend. Свяжите модальное положение с координатами x и y мыши.

Answer 2

Существует HTML5 dnd api, но, поскольку никому из тех, с кем я говорил, это не понравилось, и ни один из старых браузеров не поддерживает его, я бы сказал, что вы нашли хорошее решение в jQuery.

Answer 3

Используйте методы HTML5, которые кажутся чище, чем методы jQuery:

<div draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', '12345')">
drag me
</div>

<div ondragover="return false;" 
  ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')">
drop on me
</div>

Answer 4

Хотя в вопросе указывается родной JavaScript, я собираюсь ответить, учитывая, что @Moe Sweet прокомментировал, что jQuery был включен .

Перетаскивание - это определенная цепочка событий. Это не неприлично сложно, но это может быть сложно.

Проще говоря, перетаскивание это следующие шаги / события:

1. Мышь нажата, перетаскивание включено
2. Мышь перемещается, перетаскивание продолжается
3. Мышь отпущена, перетаскивание отключено

Простым решением является использование этих событий: mousedown, mousemove и mouseup

$(anElement).mousedown(foodown);

function foodown(){
  $(window).mousemove(foomove).mouseup(fooup);
  //stuff
}

function foomove(){
  //stuff
}

function fooup(){
  //stuff
  $(window).unbind('mousemove', foomove).unbind('mouseup', fooup);
}

Следует отметить, что события, следующие за mousedown, должны быть привязаны к window, чтобы они были перехвачены, если мышь покинула исходный элемент, удерживая ее нажатой.

Часть кода "вещи" - это то, где вам нужно проверить координаты экрана элемента и координаты экрана мыши и соответствующим образом перемещать объекты. Движение действительно необходимо только во время события mousemove, поскольку мышь не перемещалась для события mouseup или mousedown.

Есть похожий вопрос, где я разместил свой код для плагина jQuery.dragondrop .