Question

所以，我有一堆按钮，我希望用户能够将其中一个拖到拉斐尔纸上，并让raphael画一个圆圈，或者在最终坐标处画一些形状。我也希望如果他们点击按钮而不是拖动，它应该将相同的符号放在预先设定的位置。

我意识到有类似的问题，我看着它们，但我不知道为什么他们的一些例子似乎不起作用。

如果我有点啰嗦，我道歉 - 我对网络开发很新，并且对所有超载都有点不知所措。

这是我正在使用的JQuery-

$(function() {
    var cnvH =$("#thisisthemainrow").height();
    var cnvW =$("#canvas").width();
    /*grabs height and width of container element*/

    var paper = new Raphael($("#canvas")[0],cnvW,cnvH); 
    insertSymbols(paper, cnvW, cnvH);
});
function insertSymbols(paper, cnvW, cnvH){
//symbol 1
    var x = 0;
    var y = 0;
    var isDragging = false;
    $("#symbol1")
         .mousedown(function() {
             $(window).mousemove(function() {
             isDragging = true;
             $(window).unbind("mousemove");
             });
         })
        .mouseup(function(e) {
            var wasDragging = isDragging;
            isDragging = false;
            $(window).unbind("mousemove");
            if (!wasDragging) {
                 x = cnvW/4;
                 y = cnvH/4;
            }
            else{
                x = e.pageX;
                y = e.pageY;
            }
        });
   if(x!=0 && y!=0){
       var foo = drawSymbol(paper, x, y, 50);
       foo.show();
   }

};
var drawSymbol=function(paper, x,y, radius){
    var circ=paper.circle(x,y,radius);
    circ.hide();
    return circ;

};

按钮本身是使用Twitter Bootstrapp定义的 - 例如

<button class="btn btn-large btn-block" type="button" id = "symbol1"><a href="#">Symbol 1</a></button>

RaphaelJS + Jquery：拖放的幻觉

0 个答案: