我有以下小提琴: 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>
我知道拖放的界面,我似乎无法将其应用于个别数字。
答案 0 :(得分:2)
你不能使用Raphael.js拖动非svg / Raphael元素,即输入元素之前的字符串“1”。因此,您需要Raphael-text元素。
尽管Raphael支持onDragOver功能,但还不足以完全满足您的要求。比如,它可以触发,当一个元素结束时,但它没有像onOut那样的api,所以你可以恢复颜色/状态。
因此,正如我在其他SO answer中所解释的那样,我们需要跟踪坐标,并根据我们必须在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');
}
};