Scroll area by mouse drag in qooxdoo?

Question

Is there any built in possibily to drag content inside container by dragging for example qx.ui.container.Scroll? I found there are qx.ui.core.MDragDropScrolling and qx.ui.core.DragDropScrolling but don't know that is what I am looking for.

Answer 1

Try the code below (eg copy and paste into the Qooxdoo playground).

It traps the mouse movements and apply the relative movement of the mouse (while the button is down) to the scroll bars

// This is a little hack to persuade Chrome to always show the scroll bars
qx.bom.Stylesheet.createElement(
"::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }\n" +
"::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5); }\n"
);

// This is a simple thing to add a border to our bigWidget
var border = new qx.ui.decoration.Decorator().set({
        width: 3,
        style: "solid",
        color: "black"
      });

// Creates a massive widget
var bigWidget = new qx.ui.core.Widget().set({
    minWidth: 2000,
    minHeight: 2000,
    backgroundColor: "red",
    decorator: border
});

// Scrollable area
var scrollable = new qx.ui.container.Scroll(bigWidget).set({
  scrollbar: [ "on", "on" ]
});

var mouseDown = false;
var mouseStartPos = null;
var widgetStartPos = null;

bigWidget.addListener("mousedown", evt => { 
  mouseDown = true; 
  mouseStartPos = { top: evt.getScreenTop(), left: evt.getScreenLeft() };
  widgetStartPos = { top: scrollable.getScrollX(), left: scrollable.getScrollY() };
});

bigWidget.addListener("mouseup", () => { 
  mouseDown = false; 
});

bigWidget.addListener("mousemove", evt => { 
  if (!mouseDown || !evt.isLeftPressed())
    return;

  let deltaPos = { top: mouseStartPos.top - evt.getScreenTop(), left: mouseStartPos.left - evt.getScreenLeft() };
  scrollable.scrollToX(widgetStartPos.left - deltaPos.left);
  scrollable.scrollToY(widgetStartPos.top - deltaPos.top);
  console.log("deltaPos=" + JSON.stringify(deltaPos) + ", mouseStartPos=" + JSON.stringify(mouseStartPos) + ", widgetStartPos=" + JSON.stringify(widgetStartPos));
});

var doc = this.getRoot();
doc.add(scrollable, {
  left : 0,
  top  : 0,
  right: 0, 
  bottom: 0
});