1

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

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

如果我有点冗长，我深表歉意——我对 Web 开发非常陌生，并且对所有的重载有点不知所措。

这是我正在使用的 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 Bootstrap 定义的，例如 -

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

0 回答 0