Change Size of Sortable Element on drag JQuery UI

Question

Here's a small fiddle for my issue:

http://jsfiddle.net/Yc9WY/52/

Essentially, one box of items is much larger than the other. So, dragging and dropping with sortable is a challenge.

First, I changed the size of the element on start

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
       connectWith: ".connectedSortable",
       start: function(event, ui){
           $(ui.item).width($('#sortable2 li').width());
       }               
    }).disableSelection();
});​

But, I wasn't sure how to move the resized element to the cursor of the mouse. Basically, if I click any distance away from the left handside of an element in the left list, it becomes hard to drop the element onto the smaller list.

I was trying to move the element to the mouse position using:

$(ui.item).offset({top: event.pageY, left: event.pageX});

But, it didn't seem to work.

Further clarification:

(List 1) (List 2) ----------------------------------------- ---

Moving element from list 1 to list 2 is challenging because of their different sizes. So, I resized elements in list 1 to list 2 size. Now, if you click

-------------------------------------x--- ---

The element looks like

---_____________________x__ ---

where x indicated the mouse position. Essentially, I want to move the element to the mouse position to make the dragging to list 2 easier

Are there any suggestions? Thanks!

Edit: Sorry, I don't have enough rep to post an image, but...

[____________________] (before click)

[__]-------------------- x (click with x marking the location of the click)

I essentially want to move the now smaller element to the same position as the mouse.

Thanks again!

Solution 1

Add tolerance:"pointer", in the option of the sortable element

here'S the fiddle : http://jsfiddle.net/Yc9WY/55/

EDIT :

ADD cursorAt: { top:0, left: 0 }, in the option of the sortable element

It will position the item under your pointer

here'S the fiddle : http://jsfiddle.net/Yc9WY/57/

Solution 2

I found this solution that works perfectly:

$("ul.sortable").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
       // Resize elements
       $(this).sortable('refreshPositions');
    }
});

Source: http://forum.jquery.com/topic/reducing-the-size-of-elements-before-sorting-them-using-sortable

Comments

[user1464055]

That definitely works to make it function. But, for the sake of UI, is there anyway to also move the object to the mouse? Essentially, if you have a big box, and you click to towards the right side, it'll re-size, but the mouse won't be on it any longer :/

[GregM]

Please mark this question as answered or upvote this answer if it helped you