在 RaphaelJS 中拖放

Question

我有以下小提琴： http://jsfiddle.net/zugzq7vv/

我想做的是能够将输入框左边的数字1拖到方块的中心，让方块变成黑色，数字变成白色。

RaphaelJS 2.1 如何实现这一点？

JS代码：

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(document.getElementById("papercanvas"), 320, 200);

var circle = paper.rect(50, 40, 50, 50);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

var t = paper.text(75, 65,""); //I want this empty string to be a text I drag

以及简单的 HTML：

1<input id="teste" disabled></input>
<div id="papercanvas"></div>

我知道拖放界面，但我似乎无法将其应用于单个数字。

Answer 1

您无法使用 Raphael.js 来拖动非 svg/Raphael 元素，即输入元素之前的字符串“1”。因此，您需要有 Raphael-text 元素。

尽管Raphael支持onDragOver功能，但还不足以完全实现您的要求。就像，当一个元素超过它时，它可以触发，但它没有像 onOut 这样的 api，这样你就可以恢复颜色/状态。

因此，正如我的其他SO答案中所解释的，我们需要跟踪坐标，并基于此我们必须在 onDragComplete 方法中采取行动。

这是您所要求的工作fiddle。但是，随着它的扩展，您需要添加更多逻辑来处理。

var text = paper.text(10, 10, "1");
text.attr('cursor','pointer');
text.attr('font-size', '20px');

text.drag(onDragMove, onDragStart, onDragComplete);

function onDragStart(){
    this.ox = this.attr('x');
    this.oy = this.attr('y');    
}

function onDragMove(dx,dy){
    this.attr({x: this.ox + dx, y: this.oy + dy });
}

function onDragComplete(){
    if((this.attr('x') > 20 && (this.attr('x') < 70)) && (this.attr('y') < 50)) {
        this.attr('fill', 'white');
        rect.attr('fill', 'black');
    } else {
        this.attr('fill', 'black');
        rect.attr('fill', 'red');
    }
};

Answer 2

我有以下小提琴：https://jsfiddle.net/jes_2024/L7fgpt2b/

我想做的是将红点仅向一个方向移动。

拖动功能...有效

如何才能只向一个方向移动？

move = function (dx, dy) {
    var tmpPt = {
        x : this.ox + dx, 
        y : this.oy + dy
    };
    // move will be called with dx and dy
    l = gradSearch(l, tmpPt);
    pt = p.getPointAtLength(l);
    this.attr({cx: pt.x, cy: pt.y});


//something like that
if(pt.x < pt.x){
 e.drag(up);
}

},