Как повесить и обработать свои события в Drag'n'Drop?

Question

[gleendo]

Есть функция которая реализовывает "перетаскивание". Работает. Объекты можно перетаскивать. Но вот как теперь добавить собственные события? Чтобы при начале drag'a срабатывало событие например dragStart, и чтобы можно было поставить прослушку на это событие, для вывода какой нибудь информации? Например вывести в консоль объект который перетаскивается.

Демо - codepen.io/evg_/pen/wzBGvA

Создал события

dragStartEvent = new CustomEvent("dragStart", {
	"detail": { name: "DragDrop" }
}),
dragEvent = new CustomEvent("drag", {
	"detail": { coords: ??? } // как вот здесь например указать координаты мыши?
}),
dragEndEvent = new CustomEvent("dragEnd", {
	"detail": { target: ??? } // как вот здесь указать например объект который перенесли?
});

События создал, теперь в начале drag'a, когда происходит событие mousedown, происходит событие dragStart

this.dispatchEvent(dragStartEvent); // Здесь this = document. Кажется это не то что нужно. Но кроме как this не знаю как поставить другое.

Потом поставил прослушку на это событие

document.addEventListener("dragStart", function(event) { // Здесь тоже кажется не то что нужно.
	console.log(event.detail.name);
}, false);

В общем Как правильно сделать обработку собственных событий для вывода информации при drag'e?

Вот полный код функции для перетаскивания:

var block = document.querySelector(".block");

var dragDrop = function() {
	var dragging = null,
			diffX = null,
			diffY = null,

			dragStartEvent = new CustomEvent("dragStart", {
				"detail": { name: "DragDrop" }
			}),
			dragEvent = new CustomEvent("drag", {
				"detail": { coords: ??? }
			}),
			dragEndEvent = new CustomEvent("dragEnd", {
				"detail": { target: ??? }
			});

	function handleEvent(event) {
		switch(event.type) {
			case "mousedown":
				if (event.target.className.indexOf("draggable") > -1) {
					dragging = event.target;
					diffX = event.clientX - event.target.offsetLeft;
					diffY = event.clientY - event.target.offsetTop;
					this.dispatchEvent(dragStartEvent);
				}

				break;

			case "mousemove":
				if (dragging !== null) {
					dragging.style.left = event.clientX - diffX + "px";
					dragging.style.top = event.clientY  - diffY + "px";
				}

				break;

			case "mouseup":
				dragging = null;
				break;
		}
	}

	return {
		enable: function() {
			document.addEventListener("mousedown", handleEvent, false);
			document.addEventListener("mousemove", handleEvent, false);
			document.addEventListener("mouseup", handleEvent, false);
			document.addEventListener("dragStart", function(event) {
				console.log(event.detail.name);
			}, false);
		},

		disable: function() {
			document.removeEventListener("mousedown", handleEvent);
			document.removeEventListener("mousemove", handleEvent);
			document.removeEventListener("mouseup", handleEvent);
		}
	}
};

dragDrop().enable();

Все порешал. Не знаю на сколько это правильно, но так работает и вроде бы все логично.

var block = document.querySelector(".block");

var dragDrop = function() {
	var dragging = null,
			diffX = null,
			diffY = null;

	function handleEvent(event) {
		switch(event.type) {
			case "mousedown":
				if (event.target.className.indexOf("draggable") > -1) {
					dragging = event.target;
					diffX = event.clientX - event.target.offsetLeft;
					diffY = event.clientY - event.target.offsetTop;
					
					var dragStartEvent = new CustomEvent("dragStart", {
						bubbles: true,
						detail: {
							target: event.target
						}
					});
					dragging.dispatchEvent(dragStartEvent);
				}

				break;

			case "mousemove":
				if (dragging !== null) {
					dragging.style.left = event.clientX - diffX + "px";
					dragging.style.top = event.clientY  - diffY + "px";

					var dragEvent = new CustomEvent("drag", {
						bubbles: true,
						detail: {
							x: event.clientX,
							y: event.clientY
						}
					});

					dragging.dispatchEvent(dragEvent);
				}

				break;

			case "mouseup":
				dragging = null;
				break;
		}
	}

	return {
		enable: function() {
			document.addEventListener("mousedown", handleEvent, false);
			document.addEventListener("mousemove", handleEvent, false);
			document.addEventListener("mouseup", handleEvent, false);
			document.addEventListener("dragStart", function(event) {
				console.log(event.detail.target);
			}, false);
			document.addEventListener("drag", function(event) {
				console.log(event.detail.x + ":" + event.detail.y);
			}, false);
		},

		disable: function() {
			document.removeEventListener("mousedown", handleEvent);
			document.removeEventListener("mousemove", handleEvent);
			document.removeEventListener("mouseup", handleEvent);
		}
	}
};

dragDrop().enable();

Answer 1

[gleendo]

Как получить объект в своем событии я понял. Нужно при создании объекта события указать свойство bubles: true. Иначе event.target всегда будет указывать на document.

Как вот теперь получить координаты мыши? и прочую информацию об объекте?