PlaceHolder with style

Aug 11, 2009 at 5:31 PM
Edited Aug 11, 2009 at 5:54 PM

Hi, I like this library because is lightweight and offers everythig I need: a simple sortable list with drag and drop.

But I wanted to have this nice effect of showing the place (usually a box with dashed borders)  where a dragged item would fit after dropping it (like in the personalized page of google),so I made a little change in the library as follows:

in the line 48 i changed this:

list.placeHolderItem = list.draggedItem.clone().html(" ").css({ visibility: "hidden", height: list.draggedItem.height() }).attr("placeHolder", true);

to this:

list.placeHolderItem = list.draggedItem.clone().html(" ").css({ height: list.draggedItem.height()}).attr({ placeHolder: true, class:'dragsort_placeHolder' });

That is, leaving the place holder visible (getting rid of the "visibility:'hidden'" style) and adding a class to it called dragsort_placeHolder.

Then I added the style li.dragsort_placeHolder to my css like this (can be any style you like):

li.dragsort_placeHolder {

border:dashed 2px #ccc;


And in this way, while dragging an item from the list, it can be seen the dashed border around the position where the item will fit once dropped.

If this class is not defined, or even defined like

li.dragsort_placeHolder {



The behaviour is the same as the original library.

The change is no fully tested, bu at least works fine in the webpage I'm developing.


Rúbel Mujica (from Venezuela)