Jquery UI sortable: how to leave the original visible until the drop

draggablejqueryjquery-uijquery-ui-sortable

In the standard behavior demonstrated at http://jqueryui.com/demos/sortable/ when you drag an item in the list a placeholder element is displayed where the item would be dropped.

However, the original location of the item to be dropped is not indicated.

I would like to leave the original location visible until the drop, so that the visual feedback is analogous to the way the original is left in place for the "semi-transparent clone" option depicted at http://jqueryui.com/demos/draggable/#visual-feedback

Is there any way I can do this with sortable?

Thanks!

Best Answer

So one approach that seems to work (thought it's definitely a hack) is to pass the option

start: function (e, ui) { ui.item.show();}

which unhides the automatically hidden original (ui.item).

And, more generally, one can use the start function to modify the item.

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Javascript – How to get the children of the $(this) selector

The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection.

jQuery("img", this);

Which is the same as using .find() like this:

jQuery(this).find("img");

If the imgs you desire are only direct descendants of the clicked element, you can also use .children():

jQuery(this).children("img");

Best Answer

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Javascript – How to get the children of the $(this) selector

Related Topic