JQuery UI change draggable snap position based on another elements

Question

I have an bunch of draggable elements, that are absolutely positioned on an "artboard". Users can edit these elements, and also drag them.

Most important thing that user can lasso-select or shift-select many of elements, that applies to element class ".selected", so when dragging one, other selected elements should move too.

Currently this works by modifying top and left position of other elements, but this exposes a snapping problem.

Snapping only works for currently draggable element, but it should work for selected elements too.

Behavior that I want is best described in mockups.

Initial state of artboard

Current behavior

Desired behavior

I tried several different approaches, but with no luck.

Firstly, I tried to calculate selected position of bounding box of selected elements, and in drag event modify ui.position to snap to correct sides with bounding box of all selected elements. That was obviously wrong, so modifying ui position -> modifying helper element, which results in some weird jumping of elements.

After that, I tried to lock position of other elements, when bounding box of selected elements about to snap, this works for other elements, but that one that is dragged keeps moving, and i don't seem a way to stop this behavior.

I tried to modify $.ui.plugin.add('draggable', 'snap', function () {}) part of widget, so it will use different bounding box when calculating snapping, but it results in other weird behavior: when bounding box of selected elements is about to snap, currently draggable element jump (and other elements) jumps to snappable elements.

I tried also to wrap selected elements into div, with helper function of draggable widget, but I can't use this approach, as elements are absolutely positioned, so if I put them inside other absolutely positioned div, they can jump like 1000px in the left for example, so I'll need to somehow recalculate positions, and then when dragging stops - keep correct previous positions.

I can't find how to make this solution work, so I dropped it.

Edit: make small playground to showcase problem and test things https://codepen.io/newfox79/pen/eYjzmGG

Answer 1

You might be able to achieve what you need by using getBoundingClientRect().

But, instead of checking whether just one div overlaps or collides with another, you would have a checkup of overlapping of any of the elements which are selected against all of the other elements within your container / artboard.

function isOverlapping(snapHolder, dragHolder) {
    // let's loop through all of the draggables...
    for(var i = 0; i < dragHolder.length; i++) {
        // ... and check for collisions / overlaps with
        // other elements within the artboard
        for(var j = 0; j < snapHolder.length; j++) {
            var dragged = dragHolder[i].getBoundingClientRect();
            var snapped = snapHolder[j].getBoundingClientRect();

            // is there an overlap?
            if(
                dragged.right > snapped.left && 
                dragged.left < snapped.right && 
                dragged.bottom > snapped.top && 
                dragged.top < snapped.bottom
            ) {
                // raise the flag
                return true;
            }
        }
    }

    // all clear, nothing's overlapping, continue
    return false;
}

snapHolder is a collection of div elements within the artboard, which have the class snappable (that is to say, they're not selected for dragging).

Similarly, dragHolder is a collection of div elements in the artboard, which are selected for draggin.

If I've understood your current code correctly, you would call this function within your processDrag, and within your startDrag. The function would check for any overlaps between the two collections.

Keep in mind that this might not be the most optimal solution - if there's a large number of elements within your artboard, the collision checking might be laggy. In case of x total elements inside the artboard, and y of them being selected for dragging, you're looking at:

(x - y) * y

checkups per cycle (as long as the dragging lasts). In the event of selecting half of the elements, this would become y² checkups per cycle.

There are other solutions, relying on external jQuery libraries, as suggested in the following SO answers. Be mindful of the date, though:

• Please recommend a JQuery plugin that handles collision detection for draggable elements

• Restrict jQuery draggable items from overlapping/colliding with sibling elements

• jQuery Dragging With Collision Detection