CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Jeroen Bellemans
Jeroen Bellemans

Reputation: 2035

jQuery - Draggable resize to fit placeholder

I have different draggable elements. They can be dragged into placeholders (100px x 100px), but the draggable elements has a width of 100% (body width).

Now when I start dragging I trigger a resize function:

// Dragging itself

function dragging () {

    $("#draggable li.to-drag").draggable({

        connectToSortable: ".items",
        helper: "clone",
        revert: false,
        opacity: 0.5,
        cursorAt: { top: 50, left: 50},

        drag: resize,

        start: function (event, ui) {

            ui.draggable.height(ui.placeholder.outerHeight());

        }

    });

}

// Resize function triggered when I start dragging

function resize (event, ui) {

    ui.helper.css({ height: "100px", width: "100px" });

}

As the width of the draggable element is greater than the placeholder, I can't get the placeholder to accept the draggable element to be droppable.

Sounds complicating, but here's a jsfiddle

Upvotes: 0

Views: 750

Answers (2)

Dekron
Dekron

Reputation: 1212

There is an error in you fiddle line 70:

tolerance: pointer,

pointer is not define

replace it with 

tolerance: "pointer",

than all should work correctly

jsfiddle

Upvotes: 2

Mohit
Mohit

Reputation: 559

The issue is not with the width being 100%.You have changed the cursorAt to make it at the centre of the draggable item.But it still looks for the original cursor postion to drop the element

Upvotes: 0

Related Questions