水平線に沿って画像をドラッグしたい。つまり、マウスの動きの Y 値を無視したいということです。また、X 値の範囲を制限したいと考えています。画像をドラッグする CoffeeScript クラスを次に示しますが、画像の Y 値を制限しようとして失敗します。このコードのもう 1 つの問題は、画像の X 値が本来あるべき値の 2 倍になっているように見えることです。
class TripleSlider
circle = ""
# (@x,@y) is coordinate of upper left corner of component bounding box
constructor: (@editArea, @x, @y, @tsLabel, @showLimits=false) ->
dragger: (x, y) =>
x2 = Math.min(Math.max(x, 0), 127)
circle.attr({x: x2, y:0}) # does not do anything; I hoped it would constrain Y
drawRaphael: () =>
paper = Raphael(10, 50, 320, 200)
paper.fixNS()
paper.draggable.enable()
circle = paper.image("/assets/images/sliderTipDef.png", 0, 0, 13, 16).draggable.enable()
circle.drag(@dragger)
$ ->
tripleSlider = new TripleSlider($('#editArea'), 50, 100, "Attribute", true)
tripleSlider.draw()
raphael.draggable.js
ところで、 13 行目に以下のコードを挿入してパッチを適用しました。
/** Fix from https://github.com/DmitryBaranovskiy/raphael/issues/409
* Just call it once after constructing paper:
*
* var paper = Raphael(0, 0, 300, 300);
* paper.fixNS();
* paper.draggable.enable();
*/
Raphael.fn.fixNS = function() {
var r = this;
for (var ns_name in Raphael.fn) {
var ns = Raphael.fn[ns_name];
if (typeof ns == 'object') for (var fn in ns) {
var f = ns[fn];
ns[fn] = function(){ return f.apply(r, arguments); }
}
}
};
マイク