Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

minedun6's avatar

How to set placeholder for jquery ui sortable?

Hi, I'm trying to make a kanban board using jquery ui and simple bootstrap. Here's what I got so far

[Bootstrap Sortable] (https://jsfiddle.net/x38Lzf90/1/) The sample uses panels and list-group though only list-group-items are sortable. I'm trying to use the placeholder option but no idea on how to make it work so far and there seems to be some sort of bug with my code.

So far, I'm just fiddling around with it, but if I can manage to do something good, I might extract it to a plugin.

0 likes
3 replies
willvincent's avatar
Level 54

This might help: http://stackoverflow.com/a/18423852/1972101

What you have presently is just applying the class, group-list-item, to which you have no styles.. if you just want it to be styled, configure styles for that class, something like this:

.group-list-item {
  height: 50px;
  margin: 2px 0;
  padding: 18px;
  background: #fe3;
  border: 1px solid #cd6;
  opacity: .6;
}

See: https://jsfiddle.net/x38Lzf90/2/

Combining both styles and custom content: https://jsfiddle.net/x38Lzf90/3/

minedun6's avatar

Thank you my friend, however there seems to be a "dot" danging around tat doesn't fit, that's what's been botering me so far.

willvincent's avatar

Just add a style to hide it... no big deal.

ul.list-group {
  list-style-type: none;
}

Please or to participate in this conversation.