Question

我正在尝试使三个画布可拖动，同时避免它们相互重叠。我找了关于这个主题的类似问题，我发现了库“jquery-ui-draggable-collision”。这些是我的代码：

    $(document).ready(function(){

            $(".cube").draggable({ obstacle: ".obstacle", preventCollision: true });
        });


<body>
    <canvas class="cube obstacle" id="c"></canvas>
    <canvas class="cube obstacle" id="c2"></canvas>
    <canvas class="cube obstacle" id="c3"></canvas>
</body>

我的问题是，作为画布，拖动的对象和障碍物同时使它根本不移动。我想知道你是否可以帮我解决这个问题。

Answer 1

您可以尝试将障碍选择器更改为：

"canvas.obstacle[id!=" + theIdYouDontWant + "]"

它应该选择任何其他类障碍画布。

$(document).ready(function(){
    // Everything that can be dragged around
    var $draggables = $("canvas.cube");
    var id, $draggableItem;

    // Go through each item, get it's id,
    // and tell draggable() to collide with every obstacle but itself
    for (var i = 0; i < $draggables.length; i++) {
        $draggableItem = $draggables.eq(i);
        id = $draggableItem.attr("id");

        $draggableItem.draggable({
            obstacle: "canvas.obstacle[id!=\"" + id + "\"]",
            preventCollision: true
        });
    }
});

避免使用jQuery在多个可拖动画布之间重叠

1 个答案: