YUI3 - обновить класс CSS на основе положения XY

Question

Я использую перетаскивание, чтобы иметь возможность перемещать один из моих узлов внутри страницы. То, что я хочу сделать, - это как только перетаскивание завершено, получите позицию 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 скрипку приведенном выше примере, если коробка движется к внешнему цвету, то CSS применяется к " dd-demo-1 "должен измениться с .dd-demo-inside на .dd-demo-outside.

Я знаю, что у YUI есть функция getXY(), но я не знал, как наилучшим образом ее использовать или какое событие он может использовать, чтобы убедиться, что он вызывается после завершения перетаскивания узла.

Любая помощь, которую вы можете предоставить, будет высоко оценена.

Answer 1

После освобождения вы можете вызвать функцию, которая использует javascript для извлечения смещения X и Y и соответственно обновляет класс. Предполагая, что вы используете jQuery, он может выглядеть примерно так.

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

Я построил на свой JSFiddle, чтобы показать, как это будет работать http://jsfiddle.net/ab1cjrcj/12/

Answer 2

Так я обновил свой собственный код. Я subscirbed на сопротивление: конец event--

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

Тогда я сделать чистую функцию JS, которая просто проверяет для offsetTop и offsetLeft. Я думаю, что мне нужно создать собственное условие на основе этих значений, чтобы изменить имена классов.

Answer 3

Вы можете использовать метод 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)); 
    }); 

});