Javascript 将可拖动点绑定在一起

我正在使用一个名为的脚本，通过拖动角来变换图像的透视图

此脚本按预期工作。然而，我正在尝试转换两个独立图像的透视图

我有两张不同的图片。然而，我试图实现的是，左图像的两个右点与右图像的相应点绑定

因此，当我拖动左图像的右上点时，右图像的左上点也应该移动

我尝试为变量

pts

声明不同的值，但最终我同时移动了所有点

任何关于如何处理这一问题的建议都是非常受欢迎的

我已经在mousedown函数中用if语句读出了正确的点

pts.mousedown(function(e) {       

        if( $(this).parent('#containerv2').length &&  $(this).is('.bl') ||     $(this).parent('#containerv2').length && $(this).is('.tl') ){
            //Action
        }
...

所以下一步，当我意识到右图像的左下角被激活时，我尝试制作另一个目标。当这种情况发生时，我创建另一个目标并执行onMousemove的复制函数

然而，这是行不通的，我也不明白为什么

 function onMouseMove(e) {
        targetPoint.x = e.pageX - container.offset().left;
        targetPoint.y = e.pageY - container.offset().top;
        target.css({
            left : targetPoint.x,
            top : targetPoint.y
        });

        // check the polygon error, if it's 0, which means there is no error
        if(transform.checkError()==0){
            transform.update();
            img.show();
        }else{
            img.hide();
        }
    }

    function onMouseMove2(e) {
        targetPoint2.x = e.pageX - container.offset().left;
        targetPoint2.y = e.pageY - container.offset().top;
        targetExtra.css({
            left : targetPoint2.x,
            top : targetPoint2.y
        });

        // check the polygon error, if it's 0, which means there is no error
        if(transform.checkError()==0){
            transform.update();
            img.show();
        }else{
            img.hide();
        }
    }

    pts.mousedown(function(e) { 

        if( $(this).parent('#containerv2').length &&  $(this).is('.bl') ){
            //Action
            targetExtra = $('#containerv1 .br');
            targetPoint2 = targetExtra.hasClass("tl") ? transform.topLeft : targetExtra.hasClass("tr") ? transform.topRight : targetExtra.hasClass("bl") ? transform.bottomLeft : transform.bottomRight;
            onMouseMove2.apply(this, Array.prototype.slice.call(arguments));
            $(window).mousemove(onMouseMove2);
            $(window).mouseup(function() {
                $(window).unbind('mousemove', onMouseMove2);
            })
        }

        target = $(this);
            targetPoint = target.hasClass("tl") ? transform.topLeft : target.hasClass("tr") ? transform.topRight : target.hasClass("bl") ? transform.bottomLeft : transform.bottomRight;
            onMouseMove.apply(this, Array.prototype.slice.call(arguments));
            $(window).mousemove(onMouseMove);
            $(window).mouseup(function() {
                $(window).unbind('mousemove', onMouseMove);
            })
    });

---

您可以尝试使用自定义属性将点“配对”，在配对点的mousedown事件触发时为一个点触发mousedown事件

下面是一把快速小提琴，说明了这一概念：

如您所见，在运行

perspecDrag

函数之前，我将点与

data pointpair

属性配对：

$("#containerv2 .pt.tl").attr("data-pointpair", "#containerv1 .pt.tr");
$("#containerv2 .pt.bl").attr("data-pointpair", "#containerv1 .pt.br");

然后在

mousedown

事件处理程序中触发配对点的mousedown事件：

if($(this).attr("data-pointpair"))
{
    $($(this).attr("data-pointpair")).mousedown();                
}

---

不过要小心。如果您决定在已配对的点上设置

数据点对

属性，则可能存在无需进一步安全检查的无限循环情况。

问题的解决方案可能是在设置

e.target.style.pointerEvents='none'时两次传递mousedown事件“但要小心。如果您决定在已配对的点上设置数据点对属性，则可能会出现无限循环的情况，而无需进一步的安全检查。”除了手动设置之外，该场景还会被触发吗？如果您手动设置两个点的
数据点对
属性，则会发生这种情况。如果你不这样做，你就安全了。