Question

以下代码的目的是仅在您单击它时更改圆形颜色，而不是在拖放后鼠标向上更改。出于某种原因，Raphael正在点击鼠标上的点击事件。怎么预防这个？这是jsfiddle

这是HTML：

<div id="canvas"></div>

这是javascript：

Raphael.st.draggable = function() {
  var me = this,
  lx = 0,
  ly = 0,
  ox = 0,
  oy = 0,
  moveFnc = function(dx, dy) {
      lx = dx + ox;
      ly = dy + oy;
      me.transform('t' + lx + ',' + ly);
  },
  startFnc = function() {},
  endFnc = function() {
      ox = lx;
      oy = ly;
  };

  this.drag(moveFnc, startFnc, endFnc);
};



var paper = Raphael(document.getElementById('canvas'));
var mySet = paper.set();

var c = mySet.push(paper.circle(50, 50, 50).attr('fill', 'red'));

mySet.draggable();

c.click(function(evt) {
   this.attr({"fill": "#2e2e2e" });
});

Answer 1

这就是我用来拖动集合的内容：

http://jsfiddle.net/Margo/Q3EBw/5/

paper = Raphael(0, 0, 500, 500);
var ox = 0;
var oy = 0;
var screenSet = paper.set();
screenSet.push(paper.rect(0, 0, 100, 75, 0).attr({
        fill: 'red', stroke: 'none'
    }));

screenSet.push(paper.text(0 , 0 ,"Text").attr({ "text-anchor": "start" }));

    start = function() {

        ox =  this.attr("x");
        oy = this.attr("y");
        screenSet.attr({
            opacity: 1
        });
},

    move = function(dx, dy) {
        var att ={
            x: ox + dx,
            y:oy + dy
        };
        screenSet.attr(att);
    },
    up = function() {
        this.attr({
            opacity: .5
        });
        ox = 0, oy = 0;
    };
screenSet.drag(move, start, up);

希望它可以帮助你：）

Raphael JS：点击是在拖动结束时触发的

1 个答案: