raphaeljs拖放 [英] raphaeljs drag and drop

问题描述

我在我的网络应用中使用rapaeljs。
我想设置对象的可丢弃边界。对象可以在可丢弃区域中移动。一旦对象进入可丢弃区域，对象应该没有出路。

I am using rapaeljs for my web app. I want to set dropable boundries of the object. Object can move in dropable area. Once an object come in dropable area, there should be no way out for the object.

推荐答案

Raphael内置了拖放功能通过 .drag（） 支持即可。以 element.drag（start，move，up）形式使用它; 其中3个参数是对你编写的处理mousedown，move的函数的3个函数引用，和/ mouseup事件。

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.

注意 this.ox 和 this.oy 用于存储起始位置， dx 和 dy 用于移动。

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.

这是通过 Math.min（） 和 数学.max（） 在 dx 和 dy 被添加到当前位置：

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

你也可以这样做，以便盒子不能一旦放入监狱盒子，它就会再次拾起。这可以通过测试 move（）或 start（）函数中的位置或使用<来完成code> c.undrag（f）在 stop（）函数中。

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.

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

这篇关于raphaeljs拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！