Избегайте перекрытия между несколькими перетаскиваемыми холстами с помощью jQuery - PullRequest
Новая
       6

Избегайте перекрытия между несколькими перетаскиваемыми холстами с помощью jQuery

1 голос
/ 27 сентября 2011

Я пытаюсь сделать три холста перетаскиваемыми и в то же время избегать их наложения друг на друга. Я искал похожие вопросы по теме и узнал о библиотеке "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>

Моя проблема в том, что, будучи холстом, объект для перетаскивания и препятствие одновременно заставляют его вообще не двигаться. Интересно, можете ли вы помочь мне с этим?

1 Ответ

1 голос
/ 27 сентября 2011

Вы можете попробовать изменить селектор препятствий на что-то вроде:

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