codenaschen.de » November 2012 » Fixed Dojo DnD
Dojo DnD with position:fixed, a quick and dirty hack
Dojo is a mighty javascript framework that helps you to use mouse moveable windows in your webapp with only some lines of code.
Thats really nice, but will only work with position:absolute styled objects. When you want to have a window with a fixed position on the
screen (position:fixed), its only fixed until you moved it one time. Then dojo will set it to absolute.
A quick'n'dirty hack to prevent dojo to do that is to patch the corresponding line in the Mover.js from
s.position = "absolute"; // enforcing the absolute mode
to
s.position = "fixed"; // enforcing the absolute mode
Problem is, that then your absolute windows will all work as fixed.
Better, but not perfect is this patch:
--- Mover.js.uncompressed.js 2012-09-20 15:58:23.000000000 +0200
+++ Mover.js 2012-11-06 22:15:45.000000000 +0100
@@ -54,7 +54,9 @@
// event processor for onmousemove/ontouchmove
// e: Event
// mouse/touch event
- autoscroll.autoScroll(e);
+ if(this.node.style.position!="fixed")
+ autoscroll.autoScroll(e);
+
var m = this.marginBox;
this.host.onMove(this, {l: m.l + e.pageX, t: m.t + e.pageY}, e);
event.stop(e);
@@ -75,6 +77,7 @@
switch(s.position){
case "relative":
case "absolute":
+ case "fixed":
// assume that left and top values are in pixels already
l = Math.round(parseFloat(s.left)) || 0;
t = Math.round(parseFloat(s.top)) || 0;
It helps dojo to handle fixed positions too. Additional it deactivates the autoscrolling when moving the window if it is fixed.
There are some quirks when you move the window, but it works.
Important is, that you don't set the position style with a class or id in a css file. You MUST it set directly in HTML, like this:
<div id="mywindow" class="moveable" style="position: fixed;">
Thats the only way to let dojo know that the position is fixed.
I posted a feature request on the Dojo website, but i don't know if they will apply my patch, because the mentioned problems.