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.

willvincent

9 years ago

Best Answer

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

9 years ago

Level 3

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

9 years ago

Level 54

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

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

Please or to participate in this conversation.