Question

如何在raphaelJS中制作调色板行为（将元素从'调色板'拖放到'画布'）？

Answer 1

你必须在每个调色板元素中添加这个startFunction：

//DragFunctions is the object that has all the 3 d&d methods, clearer in the complete file
paletteStart: function () {
    // keep the relative coords at the start of the drag
    this.ox = 0;
    this.oy = 0;

    // as we are dragging the palette element, we clone it to leave one in his place.
    var newPaletteObj = this.clone();

    //we give the new palette element the behaviour of a palette element
    DragFunctions.addDragAndDropCapabilityToPaletteOption(newPaletteObj);

    //nice animation
    this.animate({
        "opacity": 0.5
    }, 500);
}

现在我们需要在拖动元素时使用该函数：

move: function (dx, dy) {
    // calculate translation coords
    var new_x = dx - this.ox;
    var new_y = dy - this.oy;

    // transforming coordinates
    this.transform('...T' + new_x + ',' + new_y);

    // save the new values for future drags
    this.ox = dx;
    this.oy = dy;
}

最后，在完成删除时执行的功能：

paletteUp: function () {
    if (!DragFunctions.isInsideCanvas(this)) {
        this.remove();
        //notify the user as you want!
    } else {
        //Giving the new D&D behaviour
        this.undrag();
        //give the element the new d&d functionality!
        this.animate({
            "opacity": 1
        }, 500);
    }
}

这里要注释2件事，当元素被删除时，你将不得不删除调色板行为并给它另一个（一个普通的d＆amp; d功能），如果没有，它将继续克隆元素。在这里，我给你一些很好的行为给他们：

start: function () {
    // keep the relative coords at the start of the drag
    this.ox = 0;
    this.oy = 0;
    // animate attributes to a "being dragged" state
    this.animate({
        "opacity": 0.5
    }, 500);
},
//same move function
up: function () {
    if (!DragFunctions.isInsideCanvas(this)) {
        this.animate({
            transform: '...T' + (-this.ox) + ',' + (-this.oy)
        }, 1000, "bounce");
    }
    this.animate({
        "opacity": 1
    }, 500);
},

//and the method that gives the behaviour
addDragAndDropCapabilityToSet: function (compSet) {
    compSet.drag(this.move, this.start, this.up, compSet, compSet, compSet);
}

正如您可能也看到的，我们有一个验证器，它可以看到元素是否在画布中，它是一个非常有用的函数，在这里：

isInsideCanvas: function (obj) {
    var canvasBBox = //get your 'canvas'
    var objectBBox = obj.getBBox();
    var objectPartiallyOutside = !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x, objectBBox.y) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x, objectBBox.y2) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x2, objectBBox.y) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x2, objectBBox.y2);
    return !(objectPartiallyOutside);
} Finally,
the place to call to give the element all this behaviour:

//this works for elements and sets
addDragAndDropCapabilityToPaletteOption: function (compSet) {
    compSet.drag(this.move, this.paletteStart, this.paletteUp, compSet, compSet, compSet);
}

这个演示是在我创建的用raphael创建的网站上，名为comoformamos.com 漏洞代码位于github gist中或托管在github上，因此如果您希望深入了解代码，请随意使用。

在这篇博文中更精彩地解释：devhike，我是作者。

RaphaelJS调色板行为

1 个答案: