Note that there are some explanatory texts on larger screens.

plurals
  1. POChange Size of Sortable Element on drag JQuery UI
    primarykey
    data
    text
    <p>Here's a small fiddle for my issue:</p> <p><a href="http://jsfiddle.net/Yc9WY/52/" rel="nofollow">http://jsfiddle.net/Yc9WY/52/</a></p> <p>Essentially, one box of items is much larger than the other. So, dragging and dropping with sortable is a challenge. </p> <p>First, I changed the size of the element on start</p> <pre><code>$(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable", start: function(event, ui){ $(ui.item).width($('#sortable2 li').width()); } }).disableSelection(); });​ </code></pre> <p>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.</p> <p>I was trying to move the element to the mouse position using:</p> <pre><code>$(ui.item).offset({top: event.pageY, left: event.pageX}); </code></pre> <p>But, it didn't seem to work.</p> <p>Further clarification:</p> <p><strong>(List 1) (List 2) ----------------------------------------- ---</strong></p> <p>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</p> <p><strong>-------------------------------------x--- ---</strong></p> <p>The element looks like</p> <p><strong>---</strong>_<em><strong></em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__</strong><em>x</em>__ <strong>---</strong></p> <p>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</p> <p>Are there any suggestions? Thanks!</p> <p>Edit: Sorry, I don't have enough rep to post an image, but...</p> <p><strong>[<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>_]</strong> (before click)</p> <p><strong>[<em>_</em>_]</strong>-------------------- x (click with x marking the location of the click)</p> <p>I essentially want to move the now smaller element to the same position as the mouse.</p> <p>Thanks again!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload