javascriptscrollviewdragqooxdoo

Scroll area by mouse drag in qooxdoo?


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.


Solution

  • 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
    });