在 qooxdoo 中通过鼠标拖动滚动区域？

Question

是否有任何内置功能可以通过拖动将内容拖入容器内，例如 qx.ui.container.Scroll？我发现有 qx.ui.core.MDragDropScrolling 和 qx.ui.core.DragDropScrolling 但不知道那是我要找的。

Answer 1

试试下面的代码（例如复制并粘贴到 Qooxdoo playground）。

它捕获鼠标移动并将鼠标的相对移动（当按钮按下时）应用到滚动条

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

在 qooxdoo 中通过鼠标拖动滚动区域？

Scroll area by mouse drag in qooxdoo?

javascript

scrollview

drag

qooxdoo