YUI3 - 根据 XY 位置更新 CSS 类答案

【问题标题】：YUI3 - Update CSS class based on XY positionYUI3 - 根据 XY 位置更新 CSS 类
【发布时间】：2014-11-11 20:11:33
【问题描述】：

我正在使用拖放功能在页面内移动我的一个节点。我想要做的是一旦拖放完成，获取XY位置，如果它在某个位置（XY）之外，那么应该更新应用于节点的类。

http://jsfiddle.net/gabrielesandoval/ab1cjrcj/

CSS：

.dd-demo-inside {
background-color: #8DD5E7;
color: #000;
}
.dd-demo-outside {
background-color: #004C6D;
}

JS：

YUI().use('dd-constrain', function(Y) {
   var dd1 = new Y.DD.Drag({
    node: '#dd-demo-1'
}).plug(Y.Plugin.DDConstrained, {
    constrain2node: '#dd-demo-canvas1'
});
});

所以在上面的 JS fiddle 示例中，如果框移到外部颜色，则应用于“dd-demo-1”的 CSS 应该从 .dd-demo-inside 更改为 .dd-demo-outside。

我知道 YUI 有一个 getXY() 函数，但我不确定如何使用它的最佳方式或可以在什么事件上使用它以确保在节点的拖动完成后调用它。

您能提供的任何帮助将不胜感激。

【问题讨论】：

标签： javascript css draggable yui

【解决方案1】：

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

http://jsfiddle.net/ab1cjrcj/16/

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));
    });

});

【讨论】：

以前从未听说过 Node.inRegion。我会试试看。感谢您的想法！

【解决方案2】：

所以我更新了自己的代码。我订阅了 drag:end 事件--

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

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

【讨论】：

【解决方案3】：

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

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

我在你的 JSFiddle 上构建了它以展示它是如何工作的 http://jsfiddle.net/ab1cjrcj/12/

【讨论】：