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

【问题标题】：Avoid overlap between multiple draggable canvas with jQuery使用 jQuery 避免多个可拖动画布之间的重叠
【发布时间】：2011-09-27 16:49:45
【问题描述】：

我正在尝试使三个画布可拖动，同时避免它们相互重叠。我查找了有关该主题的类似问题，并发现了有关“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>

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

【问题讨论】：

标签： javascript jquery canvas jquery-ui-draggable

【解决方案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
        });
    }
});

【讨论】：

嗨，我试过了，但他们还是不会移动任何可拖动的。
循环遍历每个可拖动的画布元素可能更容易。我将编辑我的代码。