Typesetter/include/js/dragdrop.js

198 lines
4.3 KiB
JavaScript
Raw Normal View History

2021-09-08 19:52:21 +02:00
WBd = {
scroll:false,
scrolly:0,
scrollx:0,
scrolle:false,
//DragMouseUP
DMU : function(e){
//this doesn't prevent clicks from happening
//if( WBd.started ){
//e.stopPropagation();
//e.preventDefault();
//}
var a = $('.draggable_droparea > .target');
if( a.length < 1 ){
WBd.clean();
return;
}
var b = a.get(0);
if( !b || (b == WBd.dragEl) ){
WBd.clean();
return;
}
var lnk = $(WBd.dragEl).find('a.dragdroplink').first();
if( lnk.length < 1 ){
WBd.clean();
return;
}
lnk = lnk.clone(true).appendTo('body'); //append to body so the click works
var c = a.find('a.dragdroplink').first().html();
lnk.attr('href',lnk.attr('href').replace('%s',c).replace('%25s',c));
lnk.trigger('click');
WBd.clean();
},
//clean up
clean : function(){
$('.draggable_droparea').removeClass('drag_active'); //important for proper css display of drop down menus
$('.WB_DRAG_BOX').hide();
//remove listeners
$(document).off('mousemove.drag',WBd.DMM).off('mouseup.drag',WBd.DMU);
$('.draggable_droparea > *').off('mouseover.drag').off('mouseout.drag').removeClass('target');
WBd.VARS();
},
VARS : function(){
WBd.dragEl = false;
WBd.started = false;
},
// DragMouseDown
// e event
dMDn : function(e){
var b,c,l;
//don't drag when mousing down on a drop down menu (expandable areas can be children of draggable areas)
if( $(e.target).closest('.expand ul').length > 0 ){
return;
}
$(document).on('mouseup.drag',WBd.DMU);
var a = WBd.dragEl = this; //refers to draggable element in this situation
var margx = (a.offsetWidth/2);
var margy = (a.offsetHeight/2);
//box size and adjust margins to center them around cursor
$('#WB_DRAG_BOX_TOP').height('30px').width(a.offsetWidth).css('marginTop',-(margy+30)).css('marginLeft',-margx);
$('#WB_DRAG_BOX_BOTTOM').width(a.offsetWidth).css('marginTop',margy).css('marginLeft',-margx);
$('#WB_DRAG_BOX_LEFT').height(a.offsetHeight).width(1).css('marginTop',-margy).css('marginLeft',-margx);
$('#WB_DRAG_BOX_RIGHT').height(a.offsetHeight).width(1).css('marginTop',-margy).css('marginLeft',margx);
//position box
$(document).on('mousemove.drag',WBd.DMM);
//WBd.DMM(e);
return false;
},
//DragMouseMove
DMM : function(e){
if( !e ) return; //because of scrolling
if( !WBd.started ){
WBd.started = true;
//setting the target
$('.draggable_droparea > *:not([class~=draggable_nodrop])').on('mouseover.drag',function(){
$(this).addClass('target');
}).on('mouseout.drag',function(){
$(this).removeClass('target');
});
//show drag placeholding box
$('.draggable_droparea').addClass('drag_active');
$('.WB_DRAG_BOX').show();
}
var x,y;
var wn = $(window);
x = (e.clientX + wn.scrollLeft());
y = (e.clientY + wn.scrollTop());
//move box
$('.WB_DRAG_BOX').css({'left':x,'top':y});
//scroll window if needed
x = y = 0;
if(e.clientY < 80 ){
y = -30;
}else if( (e.clientY + 60) > wn.height() ){
y = 30;
}
if( e.clientX < 60 ){
x = -30;
}else if( (e.clientX + 60) > wn.width() ){
x = 30;
}
if( (x === 0) && (y == 0) ){
WBd.SCR();
}else{
WBd.scrollx = x;
WBd.scrolly = y;
WBd.scrolle = e;
if( WBd.scroll === false ){
WBd.scroll = window.setInterval(function(){
//stop in case the drag ended of the screen
if( !WBd.dragEl ){
WBd.SCR();
return;
}
window.scrollBy(WBd.scrollx,WBd.scrolly);
WBd.DMM(WBd.scrolle);
},150);
}
}
return false;
},
//SCROLL RESET
SCR:function(){
if( WBd.scroll ){
window.clearInterval(WBd.scroll);
}
WBd.scroll = WBd.scrolle = false;
}
};
$( function() {
WBd.VARS();
$(document).on('mousedown','.draggable_element',WBd.dMDn);
var a = $('<div style="position:absolute;z-index:10000;cursor:move;display:none;" class="WB_DRAG_BOX"></div>');
a.clone().css('borderBottom','2px dashed #bbb').attr('id','WB_DRAG_BOX_TOP').appendTo('body');
a.clone().css('borderLeft','2px dashed #bbb').attr('id','WB_DRAG_BOX_LEFT').appendTo('body');
a.clone().css('borderTop','2px dashed #bbb').attr('id','WB_DRAG_BOX_BOTTOM').appendTo('body');
a.clone().css('borderRight','2px dashed #bbb').attr('id','WB_DRAG_BOX_RIGHT').appendTo('body');
});