Raphael JS:在拖动结束时触发点击

Raphael JS: Click is triggered at end of drag

本文关键字：结束 JS 拖动 Raphael      更新时间：2023-09-26

以下代码的目的是仅在单击圆圈时更改圆圈颜色，而不是在拖放后鼠标向上时更改圆圈颜色。由于某些原因，Raphael在鼠标向上时触发了一个点击事件。如何预防这种情况?这是jsfield

这是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" });
});

这是我用来拖动集合的:

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);

希望对你有帮助

相关文章：