98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
|
|
class Draggable {
|
|
constructor(draggableClass, holderClass, hoverClassName, parentIdentifier, doneMovingFunc) {
|
|
this.parentIdentifier = parentIdentifier+" " || '';
|
|
this.moveableClass = draggableClass || "moveable";
|
|
this.holderClass = holderClass || "holder";
|
|
this.hoverClass = hoverClassName || "elementHover";
|
|
this.activeDragging = false;
|
|
this.draggingElem = null;
|
|
|
|
this.doneMoving = doneMovingFunc || function(draggedElement, afterPosElement){ console.log("No custom done-moving-function.", draggedElement, afterPosElement); };
|
|
|
|
this.update();
|
|
}
|
|
|
|
update(){
|
|
let hammerOptions = {};
|
|
let elemHolderHtml = "<div class='elemHolder' style='position: absolute;'></div>";
|
|
|
|
$(this.parentIdentifier+"."+this.moveableClass+":not(:eq(0))").off().hammer(hammerOptions).bind('panstart panend panmove', ev => {
|
|
if(ev.type === "panmove") {
|
|
this.moveDraggingElem(ev);
|
|
}
|
|
else if(ev.type === "panstart") {
|
|
// console.log("start", ev);
|
|
this.activeDragging = true;
|
|
this.draggingElem = $(ev.currentTarget);
|
|
|
|
if($(".elemHolder").length < 1){
|
|
$("body").append(elemHolderHtml);
|
|
}
|
|
this.draggingElem.clone().appendTo(".elemHolder");
|
|
this.draggingElem.css('opacity', '30%');
|
|
|
|
$(".elemHolder").css('height', '').css('height', ($(".elemHolder").height()+10)+"px");
|
|
}
|
|
else if(ev.type === "panend"){
|
|
// console.log("end", ev);
|
|
|
|
this.activeDragging = false;
|
|
this.draggingElem.css('opacity', '');
|
|
$(document).off('mousemove');
|
|
$(".elemHolder").html('');
|
|
|
|
let moveAfterElem = $("."+this.hoverClass);
|
|
if(moveAfterElem.length === 1){
|
|
if(!this.draggingElem.hasClass(this.hoverClass)){
|
|
this.doneMoving(this.draggingElem, moveAfterElem);
|
|
|
|
this.draggingElem.detach().insertAfter("."+this.hoverClass);
|
|
}
|
|
}
|
|
|
|
this.draggingElem = null;
|
|
$('.'+this.hoverClass).removeClass(this.hoverClass);
|
|
}
|
|
});
|
|
}
|
|
|
|
moveDraggingElem(event){
|
|
// console.log(event);
|
|
let elem = $('.elemHolder');
|
|
|
|
let x = event.gesture.center.x;
|
|
let y = event.gesture.center.y;
|
|
|
|
elem.css({ left: ((window.scrollX + x) - elem.width() / 4), top: ((window.scrollY + y)+4) });
|
|
|
|
|
|
$('.'+this.hoverClass).removeClass(this.hoverClass);
|
|
|
|
// let elemAtPos = $(document.elementFromPoint(x, y));
|
|
let elemAtPos = this.findClosestPos(x, y);
|
|
if(elemAtPos !== null){
|
|
elemAtPos.addClass(this.hoverClass);
|
|
}
|
|
}
|
|
|
|
findClosestPos(posX, posY){
|
|
let elemAtPos = $(document.elementFromPoint(posX, posY));
|
|
// let posClass = "posBelow";
|
|
|
|
let closest = elemAtPos.closest("."+this.moveableClass);
|
|
if(closest.length === 1){
|
|
return closest.first();
|
|
}
|
|
|
|
if(elemAtPos.hasClass(this.holderClass)){
|
|
if(posY < (elemAtPos.offset().top + elemAtPos.height()/2)){
|
|
return elemAtPos.find("."+this.moveableClass).first();
|
|
}
|
|
return elemAtPos.find("."+this.moveableClass).last();
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}
|