raphael 之拖放

最新推荐文章于 2020-12-30 09:40:49 发布

茶叶

最新推荐文章于 2020-12-30 09:40:49 发布

阅读量711

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/MK259/article/details/8241730

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> test </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script>
Raphael(function ()
{
    var R = Raphael("paper", 800, 1000);
   var rect = R.rect(0, 0, 400, 300).attr({"fill":"green", 'opacity':0.5});

   var p = R.path('M0 0L100 0L50 80Z');

   p.attr({"fill":"green", 'opacity':0.5});
   rect.draggable();
   p.draggable();
   /*
   var R = Raphael("paper", 400, 300);
   var p = R.path('M0 0L100 0L50 80Z');

   p.attr({"fill":"green", 'opacity':0.8});

   var start = function (x, y) {
      this.attr({opacity: 1});
      this.lastX = x;
      this.lastY = y;
   },
   move = function (dx, dy, x, y) {
      var deltaX = x - this.lastX;
      var deltaY = y - this.lastY;
      this.translate(deltaX, deltaY);
      this.lastX = x;
      this.lastY = y;
   },
   up = function () {
      this.attr({opacity: 0.8});
   };

   p.drag(move, start, up);
   */
});
(function(R) {
    R.el.draggable = function(move, start, up) {
        this._ui = this._ui || {};

        var that = this;

        this._ui.onMove = R.is(move, 'function') ?
        move : function(distanceX, distanceY, x, y, deltaX, deltaY) {
            that.translate(deltaX, deltaY);
        };

        this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
        };

        function onMove(distanceX, distanceY, x, y) {
            var deltaX = x - that._ui.lastX;
            var deltaY = y - that._ui.lastY;
            that._ui.lastX = x;
            that._ui.lastY = y;
            that._ui.onMove(distanceX, distanceY, x, y, deltaX, deltaY);
            that.paper.safari();
        };

        function onStart(x, y) {
            that._ui.lastX = x;
            that._ui.lastY = y;
            that._ui.onStart(x, y);
        };

        return this.drag(onMove, onStart, up);
    };
})(Raphael);

</script>
</head>

<body>

<div id="paper"></div>
</body>
</html>