Home/ Questions/Q 6611329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:57:23+00:00

I’m trying to make three canvas to be draggable and at the same time

  • 0

I’m trying to make three canvas to be draggable and at the same time to avoid them from overlapping each other. I looked for similar questions about the topic and I found out about the library “jquery-ui-draggable-collision”. These is the code that I have:

    $(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>

My problem is that being a canvas the object to drag and the obstacle at the same time makes it not to move at all. I wonder if you can help me out with this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could try changing the obstacle selector to something like:

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

    It should select any other canvas of class obstacle.

    $(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
        });
    }
});
    • 0