Javascript YUI3-基于XY位置更新CSS类

我正在使用拖放功能来移动页面中的一个节点。我希望能够做到的是，一旦拖放完成，获得XY位置，如果它在某个位置XY之外，那么应用于节点的类应该更新

CSS:

JS:

因此，在上面的JS提琴示例中，如果框移动到外部颜色，那么应用于dd-demo-1的CSS应该从内部的.dd demo更改为外部的.dd demo

我知道YUI有一个getXY函数，但我不确定如何最好地使用它，或者可以在什么事件上使用它来确保在完成节点拖动后调用它

---

非常感谢您提供的任何帮助。

一旦发布，您可以调用一个函数，该函数使用javascript检索X和Y偏移量，并相应地更新类。假设您使用的是jQuery，它可能看起来像这样

var offset = $(element).offset();
if(offset.left > x && offset.top > y) {
  element.addClass(newClass);
 }

---

我构建了您的JSFIDLE来展示它是如何工作的，所以我更新了自己的代码。我将子循环到drag:end事件-

dd1.on('drag:end', getOffsetTop);

---

然后我创建了一个纯JS函数，它只检查offsetTop和offsetLeft。我想我应该能够根据这些值创建自己的条件来更改类名。

您可以使用Node.inRegion方法测试节点是否在另一个节点内，将true作为第二个参数传递将确保它完全在目标区域内

---

以前从未听说过Node.in区域。我会试试看。谢谢你的主意！

var offset = $(element).offset();
if(offset.left > x && offset.top > y) {
  element.addClass(newClass);
 }

dd1.on('drag:end', getOffsetTop);

YUI().use('dd-constrain', function(Y) {
    var dragNode = Y.one('#dd-demo-1'), 
        innerCanvasNode = Y.one('#dd-demo-canvas3'),
        dd1;

    dd1 = new Y.DD.Drag({
        node: dragNode
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#dd-demo-canvas1'
    });

    dd1.on('drag:end', function(e){
        if (dragNode.inRegion(innerCanvasNode, true)){
            dragNode.replaceClass('dd-demo-outside', 'dd-demo-inside');
        } else {
            dragNode.replaceClass('dd-demo-inside', 'dd-demo-outside');
        }
        //console.log(dragNode.inRegion(innerCanvasNode, true));
    });

});