Question

我正在构建一个水平拖动的页面布局。有3列，有两个拖动对象。除了设置拖动的最大/最小值之外，一切正常。

布局如下所示，colB的两侧有两个拖动条。

---------------------------
  colA  |  colB  |  colC
        |        |         
        |        |         
        |        |         
        |        |         
        |        |         
        |        |         
        |        |         
        |        |

我需要设置它以便colA的拖动器的最大宽度（它的左边值）等于colC的拖动器。同样，ColC的最低要求是colA的拖拉机＆＃39;左值。

该功能如下所示：

function doDragA(e) {
  dragA.style.left = (e.clientX) + 'px';
}

function doDragC(e) {
  dragC.style.left = (e.clientX) + 'px';
}

我试图做这样的事情：

function doDragA(e) {
  var posC = parseInt(document.defaultView.getComputedStyle(dragC).left, 10);
  dragA.style.left = (math.max(posC), math.min(0)) e.clientX + 'px';
}

function doDragC(e) {
  var posA = parseInt(document.defaultView.getComputedStyle(dragA).left, 10);
  dragC.style.left = (math.max(0), math.min(posA)) e.clientX + 'px';
}

但是我遇到了语法错误。我控制台记录了这些值并且它们通过了，它只是数学最大/最小语法我错了。

Answer 1

首先，javascript区分大小写，数学对象为Math，而不是math。

其次，min和max的用法是提供一个参数列表，而不仅仅是一个 - 它会返回“最高/最低值是多少？”的答案。

假设您希望e.clientX的值受某些值valueMax和valueMin限制：

var valueUpToMax = Math.min(valueMax, e.clientX);
var valueAtLeastMin = Math.max(valueMin, e.clientX);

// so we can combine those to bound on both sides:
var boundedValue = Math.max(valueMin, Math.min(valueMax, e.clientX));

似乎他们应该是相反的方式;我们使用Math.min限制为最大值，但这是因为我们限制为最大值而不是尝试获得最大数字。

一般原则是使用数学中的函数：

c = f(a, b);
e = g(c, d);
-> e = g( f(a, b), d);

如何使用Math.max（）和Math.min（）来绑定我的拖动器

1 个答案: