Jqueryui - Draggable Element Gets Dropped Onto Multiple Droppable Areas If the Droppable Areas Are Scaled Down

JQueryUI - draggable element gets dropped onto multiple droppable areas if the droppable areas are scaled down

Found a workaround , posting it here just in case it helps anyone else.

I had to modify jquery-ui.js.

m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight};

to

m[i].proportions = { width: m[i].element[0].offsetWidth*scaleFactor, height: m[i].element[0].offsetHeight*scaleFactor };

where scaleFactor is initialized to 1 and is changed in your javascript code to the value of css-transform , i.e., If you use -webkit-transform:scale(0.3,0.3) , set the scaleFactor to 0.3 and bingo , you are done!

Updated fiddle using the changed jquery-ui.js file

http://jsfiddle.net/P4FMr/4/

multiple droppable

Maybe like this? Put up a demo here.

$(".droppable").droppable({
    drop: function (event, ui) {
        var $draggable = $(ui.draggable);

        var draggableTop    = $draggable.offset().top;
        var draggableHeight = $draggable.height();
        var draggableBottom = draggableTop + draggableHeight;

        $droppables = $(".droppable");

        $droppablesCoveredByDraggable = $droppables.filter( function() {
            var $droppable  = $(this);
            var top                 = $droppable.offset().top;
            var height          = $droppable.height();
            var bottom          = top + height;

            var isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop;
            return isCoveredByDraggable;
        });

        //example: mark the droppables that are covered
        $droppables.removeClass("marked");
        $droppablesCoveredByDraggable.addClass("marked");
    }
});

jQueryUI Multiple droppable elements

You can use a clone helper for the draggable option, than in the drop event clone and append the dropped helper.

Code:

$(function () {

    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});

Demo: http://jsfiddle.net/IrvinDominin/v3L7A/

Jquery droppable area wrong if zoomed

Thats a known jQueryUI-Bug since many years (See this or this).
AFAIK there is still no way to fix this.

Maybe these changes in the jQueryUI-Code itself may help you.

Accurate drop for draggable element on scaled div

For the cursor position while dragging, see this answer : Make Cursor position in center for ui.helper in jquery-ui draggable method

Basically, you can control the cursor position of the instance, allowing to have something more dynamic that cursorAt. Like this:

start: function(event, ui){
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }
},

Then on the drop, you need to take into account the transform, but you can simplify by using the helper coordinates instead of the draggable. Like this:

element_top = (ui.helper.offset().top / percent) - (documentBg.offset().top / percent);
element_left = (ui.helper.offset().left / percent) - (documentBg.offset().left / percent);

Result: https://codepen.io/anon/pen/jamLBq

Large draggable item into small droppable container?

I have found a way:

$('.drop').droppable({
  tolerance: 'pointer',
  drop: function() {
    //
  }
});

---

Related Topics