当前位置：文江博客话题详情

raphaeljs 拖放

发布于 2024-09-18 13:09:01 字数 81 浏览 6 评论 0原文

我正在为我的网络应用程序使用 rapaeljs。我想设置对象的可放置边界。对象可以在可放置区域移动。一旦物体进入可投放区域，该物体就应该没有出路。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨洒年华 2024-09-25 13:09:01

Raphael 通过 .drag() 内置了拖放支持。以 element.drag(start, move, up); 的形式使用它，其中 3 个参数是对您编写的分别处理 mousedown、movement 和 mouseup 事件的函数的 3 个函数引用。

请注意如何使用 this.ox 和 this.oy 来存储起始位置，以及如何使用 dx 和 dy为了运动。

以下实现了对框的拖放。盒子总是可以移动，但一旦进入“监狱”盒子，就无法再移出。当盒子进入监狱时，颜色会立即改变，以向用户表明功能已更改。

这是通过 Math.min()< 实现的/code>和 Math.max() 在将 dx 和 dy 添加到当前位置后调整框的位置：

var nowX, nowY, move = function (dx, dy) {
    // move will be called with dx and dy
    if (this.attr("y") > 60 || this.attr("x") > 60)
        this.attr({x: this.ox + dx, y: this.oy + dy}); 
    else {
        nowX = Math.min(60, this.ox + dx);
        nowY = Math.min(60, this.oy + dy);
        nowX = Math.max(0, nowX);
        nowY = Math.max(0, nowY);            
        this.attr({x: nowX, y: nowY });
        if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
    }
}

您可以还要确保盒子一旦放入“监狱”盒子就无法再被拾起。这可以通过测试 move() 或 start() 函数中的位置或使用 c.undrag(f) 来完成在 stop() 函数中。

jsFiddle 示例

window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
    c = R.rect(200, 200, 40, 40).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    j = R.rect(0,0,100,100),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});
        if (this.attr("y") < 60 &&  this.attr("x") < 60)
            this.attr({fill: "#000"});        
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        if (this.attr("y") > 60 || this.attr("x") > 60)
            this.attr({x: this.ox + dx, y: this.oy + dy}); 
        else {
            nowX = Math.min(60, this.ox + dx);
            nowY = Math.min(60, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);            
            this.attr({x: nowX, y: nowY });
            if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
        }
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        if (this.attr("y") < 60 && this.attr("x") < 60)
            this.attr({fill: "#AEAEAE"});            
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
};

Raphael has built in drag and drop support through .drag(). Use it in the form element.drag(start, move, up); Where the 3 arguments are 3 function references to the functions you write that deal with the mousedown, movement, and mouseup events respectively.

Note how this.ox and this.oy is used to store the starting positions and dx and dy is used for the movement.

The following implements a drag and drop on a box. The box can always be moved, but once it's in the "jail" box, it cannot be moved back out. When the box crosses into the jail, the color is instantly changed, to signal the user that the functionality has changed.

This is implemented with a Math.min() and Math.max() adjustment of the box's position after dx and dy are added to the current position:

var nowX, nowY, move = function (dx, dy) {
    // move will be called with dx and dy
    if (this.attr("y") > 60 || this.attr("x") > 60)
        this.attr({x: this.ox + dx, y: this.oy + dy}); 
    else {
        nowX = Math.min(60, this.ox + dx);
        nowY = Math.min(60, this.oy + dy);
        nowX = Math.max(0, nowX);
        nowY = Math.max(0, nowY);            
        this.attr({x: nowX, y: nowY });
        if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
    }
}

You could also make it so that the box cannot be picked up again once it is put down in the "jail" box. This could be done with a test of position in the move() or start() function or the use of c.undrag(f) in the stop() function.

jsFiddle example

window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
    c = R.rect(200, 200, 40, 40).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    j = R.rect(0,0,100,100),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});
        if (this.attr("y") < 60 &&  this.attr("x") < 60)
            this.attr({fill: "#000"});        
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        if (this.attr("y") > 60 || this.attr("x") > 60)
            this.attr({x: this.ox + dx, y: this.oy + dy}); 
        else {
            nowX = Math.min(60, this.ox + dx);
            nowY = Math.min(60, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);            
            this.attr({x: nowX, y: nowY });
            if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
        }
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        if (this.attr("y") < 60 && this.attr("x") < 60)
            this.attr({fill: "#AEAEAE"});            
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
};

回复收藏 0 原文

~没有更多了~