外旋转的div内侧内格不跟随鼠标的情况下，与jQuery UI拖动(Inner div inside

我有一个外层div内部的内格。内的div是拖动和外通过40度旋转。这是一个测试案例。在实际情况下，它可以是任何角度。有作为图中所示的位于另一个的div称为点。（我是从闪存的背景。在Flash中，如果我是拖内股利将跟随，即使它包含一个外旋转格。里面的鼠标），但在HTML内的div不跟随鼠标，因为它可以看出从小提琴。我想在div“点”精确地跟随鼠标。这可能吗。我试着用trignometry工作，但不能让它开始工作。

http://jsfiddle.net/bobbyfrancisjoseph/kB4ra/8/

Answer 1:

这里是我的方法解决这个问题。

http://jsfiddle.net/2X9sT/21/

我把该点的旋转格之外。这样我放心，拖动事件会产生一种正常的行为（以怪异的方向没有跳跃）。我用的是拖动处理程序，以点连接到鼠标光标。

在拖动事件，我变换拖动偏移，以反映新的值。这是通过在旋转角度的相反方向绕外层div中心旋转偏移完成。

我测试了它，它似乎在IE9，火狐和Chrome是工作。

你可以尝试不同的角度值，它应该工作的罚款。

我还修改了HTML，这样就可以在同样的逻辑也适用于网页多个div。

编辑：

我更新了脚本的意见建议占围堵行为以及级联旋转。

我也使得expirementing outer的div另一个DIV中拖动。现在，它几乎工作。我只需要能够更新拖动div的中心修复拖动行为。

尝试拖动红格。

http://jsfiddle.net/mohdali/kETcE/39/

Answer 2:

我在现在的工作，所以我不能为你做的工作，但我可以解释解决你的问题（可能不是最简单的方法最巧妙的方法背后的数学，但不像其他一些黑客它的很多更灵活一旦你得到它实现）。

首先，你必须认识到，旋转插件，您正在使用的应用变换你的元素（ transform: rotate(30deg) ），而这又是通过浏览器（变成一个矩阵matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0) 其次，需要了解，通过旋转的元素的子元素的轴与它绝对和完全旋转的唯一（后找了半天也没有任何真正的技巧绕过这一点，这是有道理的），从而方法是带着孩子离开父母的一些其他的答案的建议，但我假定这是不是在你的应用程序的选项。

现在，我们因此需要做的是抵消母公司，这是一个两步过程的原始矩阵。首先，我们需要使用代码大致如下找到矩阵：

var styles = window.getComputedStyle(el, null);

var matrix = styles.getPropertyValue("-webkit-transform") ||
             styles.getPropertyValue("-moz-transform") ||
             styles.getPropertyValue("-ms-transform") ||
             styles.getPropertyValue("-o-transform") ||
             styles.getPropertyValue("transform");

接下来的矩阵将是如上所示，你将需要解析到一个数组，使用它可以工作的字符串（有jQuery插件做到这一点）。一旦你这样做，你将需要采取矩阵的逆（其归结为rotate(-30deg)在你的例子），可以使用例如做这个库（或你的数学书：P）。

最后，你需要做的逆矩阵倍（使用矩阵库我前面提到的）的转换矩阵（使用这个工具来找出那些看（译文如何沿x轴和y轴，有点运动像左边和顶部上相对定位的元素，但硬件加速和矩阵的一部分转换CSS属性）），它会给你，你可以应用到你的子元素让你在同一轴线上为你的父元素翻译一个新的矩阵。

现在，你可以大大地用这样简化了这一left ， top和手动三角¹只特异性转（绕过逆矩阵的全部需要，甚至完全矩阵），但是这有明显的缺点，这将仅适用于正常轮换工作并需要根据它使用的每个具体情况改变。

哦，如果你现在想的那一刹那是轻松了很多，相信我，轴在HTML / CSS旋转的方式作出了很大的意义和如果你想闪样的行为使用这个库。

^{1这是穆罕默德·阿里·在他的例如答案（该干嘛transformOffset功能在他的jsfiddle ）。}

^{免责声明，它已经一段时间，因为我一直在做这个东西，我矩阵的理解从未有过非常好的，所以如果你看到任何错误，请指出来/修复它们。}

Answer 3:

对于Webkit的而已， webkitConvertPointFromPageToNode函数处理缺少的行为：

   var point = webkitConvertPointFromPageToNode(
       document.getElementById("outer"),
       new WebKitPoint(event.pageX, event.pageY)
   );

的jsfiddle： http://jsfiddle.net/kB4ra/108/

为了弥补其他浏览器，以及，你可以使用这个StackOverflow的答案中描述的方法： https://stackoverflow.com/a/6994825/638544

function coords(event, element) {
  function a(width) {
    var l = 0, r = 200;
    while (r - l > 0.0001) {
      var mid = (r + l) / 2;
      var a = document.createElement('div');
      a.style.cssText = 'position: absolute;left:0;top:0;background: red;z-index: 1000;';
      a.style[width ? 'width' : 'height'] = mid.toFixed(3) + '%';
      a.style[width ? 'height' : 'width'] = '100%';
      element.appendChild(a);
      var x = document.elementFromPoint(event.clientX, event.clientY);
      element.removeChild(a);
      if (x === a) {
        r = mid;
      } else {
        if (r === 200) {
          return null;
        }
        l = mid;
      }
    }
    return mid;
  }
    var l = a(true),
        r = a(false);
    return (l && r) ? {
        x: l,
        y: r
    } : null;
}

这有当鼠标移动的目标元素以外不工作的缺点，但它应该是可以任意量扩大其覆盖区域（虽然这将是相当困难，以保证它覆盖了整个窗口无论怎样大）。

的jsfiddle： http://jsfiddle.net/kB4ra/122/

这可以扩展应用通过将鼠标移动事件#point：

$('#outer').mousemove(function(event){
   var point = convertCoordinates(event, $("#outer"));

    $("#point").css({left: point.x+1, top: point.y+1});          
});

请注意，我通过1px的调整#point的x和y坐标，以防止它直接作为鼠标下方; 如果我不这样做，那么它会阻止拖动#inner。另一种解决将是添加处理程序，以#point是检测鼠标事件，并将它们传递到任何一个元件直接#point下方（和stopPropagation，使他们不会在更大的页面元素运行两次）。

的jsfiddle： http://jsfiddle.net/kB4ra/123/