Javascript 拖动不'；当画布具有响应性时，不会检测到跌落

在Animate CC中，我使用CreateJS/EaselJS API创建了大量不同的HTML5画布，所有这些画布都具有拖放元素，每次都具有渐进特性

为了构建拖放交互，我在drag MovieClip中添加了一些事件监听器，在

鼠标向下

、

按Move

和

按Up

事件上。它们都有相关的功能

拖动电影剪辑的（部分）操作代码 正如我所说，所有的拖放功能都是以渐进的方式实现的，因此在某些画布中，拖动不会（有意地）检测到拖放，在另一些画布中，当拖动在拖放上时，透明度（alpha）应用于拖动，在另一些画布中，拖动必须放置在拖放上或返回到其原始位置，在其他情况下，当阻力超过一个下降点时，它不能下降到其他位置；等等

几乎所有这些实现中不变的是拖动在

pressmove

事件上的移动方式

onPressMove功能 …以及它在下降时如何检测下降，以及在

按move

事件中

detectDrop函数 只有一种情况下，拖放交互无法按预期工作，即画布具有响应性时

当画布位于中心位置时没有问题，拖动运动和跌落检测都可以正常工作

但当画布具有响应性时，拖动的运动效果很好，但是

---

拖动时，不会检测到下降。正如我到目前为止所测试的，阻力检测到在另一个位置的某个下降，这显然不是前面提到的下降的位置

在进行了一些类似于上面所示的核心实现的拖放测试之后，我找到了一个解决方案，其中包括对拖放检测功能进行额外的转换

首先，point变量现在在后台的坐标空间内保持当前鼠标位置：

var point = stage.globalToLocal(event.stageX, event.stageY);

然后，我使用该点转换到水滴的坐标空间。该转换保存在另一个点变量中：

var pointGTL = dropLocation.globalToLocal(point.x, point.y); 

使用之前定义的点变量在局部坐标中进行交叉测试：

event.currentTarget.hitTest(pointGTL.x,pointGTL.y) 

现在，跌落检测功能如下所示：

detectDrop函数

---

拖拽在两种响应模式下都能正常工作（适应视图或拉伸以适应）。

在我对拖拽/拖拽所做的一些测试之后，类似于上面所示的核心实现，我找到了一个解决方案，包括对拖拽检测功能进行额外的转换

首先，point变量现在在后台的坐标空间内保持当前鼠标位置：

var point = stage.globalToLocal(event.stageX, event.stageY);

然后，我使用该点转换到水滴的坐标空间。该转换保存在另一个点变量中：

var pointGTL = dropLocation.globalToLocal(point.x, point.y); 

使用之前定义的点变量在局部坐标中进行交叉测试：

event.currentTarget.hitTest(pointGTL.x,pointGTL.y) 

现在，跌落检测功能如下所示：

detectDrop函数 拖动在两种响应模式下都能正常工作（在视图中配合或拉伸以配合）

function detectDrop(event){
    /* Initial variables */
    var dropLocation;       //  Drop Location
    var point, pointGTL;    //  Points for the collision comparison
    var dropFound = false;  //  Drop is found? By default, no. 

    /* Drop is cloned */
    dropLocation = drop.clone();

    /* Position of the stage is converted to local 
       using the mouse pointer position */  
    point = stage.globalToLocal(event.stageX, event.stageY);

    /* Then, the position of the drop is converted to local 
       using the point defined before */ 
    pointGTL = dropLocation.globalToLocal(point.x, point.y); 

    /* In local coordinates, the drag intersects with the point defined before? */  
    if (event.currentTarget.hitTest(pointGTL.x,pointGTL.y)) {   
        /* If yes, the drop was found */ 
        dropFound = true;                      
    }

    /* Rest of the code */
}