2

I'm implementing a draggle unordered list through jQuery ui and am expecting issues where while element is dragged It has some sort of margin or padding added to it that I can't find.

<ul class="sortable-queue">
                            <li class="item-dragable">
                                Drag me
                            </li>
                            <li class="item-dragable">
                                Drag me
                            </li>
                            <li class="item-dragable">
                                Drag me
                            </li>
                        </ul>

 ul {
        padding: 0;
        margin: 0;
    }

    .item-dragable {
        width: 108px;
        background-color: @color-white;
        height: 150px;
        display: inline-block;
        margin: 0;
        margin-right: 11px;
        .drop-shadow(2px, 2px, 3px, 0.1);

        &:last-child {
            margin-right: 0 !important;
        }

        &:hover {
            cursor: pointer;
        }
    }

(Less used for css, and ul refers to .sortable-queue)

This is how list looks initially:

enter image description here

and this is how it looks when item is dragged (I want to only drag it horizontally)

enter image description here

initiating jQuery ui:

$( ".sortable-queue" ).sortable({
      revert: true,
      axis: "x",
      containment: "parent", 
      scroll: false
    });
Ilja
  • 44,142
  • 92
  • 275
  • 498
  • Did you use $( ".item-dragable" ).draggable({ containment: "parent", scroll: false }); as from example of [constrain-movement](https://jqueryui.com/draggable/#constrain-movement)? – fuyushimoya Jun 29 '15 at 10:09
  • @fuyushimoya just updated question to show how I initiate it at the moment (added your parameters) still no change :/ – Ilja Jun 29 '15 at 10:13

1 Answers1

2

You forget to add float:left to your draggable's css, after adding it, it'll work, however, the ul's height will now unable to calculate, so from How do you keep parents of floated elements from collapsing

Add

ul:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

will make the children's height visible to ul

Here's what you might expect : jsfiddle

Community
  • 1
  • 1
fuyushimoya
  • 9,715
  • 3
  • 27
  • 34