CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-sortable
Standard
Standard

Reputation: 1512

sortable list affects other elements around

I have two lists <ul> with <li>-tags. The user should be able to move them like they want; into the first or second ul, etc.

Works like intented except that every time the user starts dragging, the parent element will change it's dimension. I can't give it a fixed height, because if there are many <li>-tags, a second row of elements will appear. Furthermore if I hide an element from this list, the elements will go "up", causing the parent element to get some extra height.

My sortable call:

$("#myItems, #clothingItems").sortable({
    start: function (event, ui) { //prevent dragged item from clicking
        $(idname).addClass('noclick');
        $('#powerTip').hide();
    },
    zIndex: 100000,
    appendTo: "body",
    connectWith: "#myItems, #clothingItems",
    containment: '#mainMenu',
    drag: function (event) {
        $('#powerTip').hide();
    },
    stop: function () {
        $(idname).removeClass('noclick');
    }
});

There is also a live version: http://wernersbacher.de/music/#items

PS: To hide an element, click on it and select "Sell Selected Items".

Upvotes: 2

Views: 106

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Well you just need to add one property to your class .itemUL and change the min-height and your class will look like as follows:

.itemUL
{
  display:flex //Add this
  list-style-type: none;
  padding: 9px 5px 0px 12px;
  margin: 0;
  margin-top: 10px;
  min-height: 92px; //Change this
  background: rgba(0, 0, 0, 0.09);
}

Update:

A slight jquery trick to adjust your height:

if($(".itemUL").width()>727)
{
   $(this).height($(this).height+92);
}

and your .itemUL will have one more property as below:

.itemUL {
  display: flex;
  flex-wrap: wrap; //Add this
  list-style-type: none;
  padding: 9px 5px 0px 12px;
  margin: 0;
  margin-top: 10px;
  min-height: 92px;
  background: rgba(0, 0, 0, 0.09);
}

Upvotes: 1

smnbbrv
smnbbrv

Reputation: 24531

It looks like sortable automatically adds a new line before your elements while dragging; as long as your elements are displayed as inline blocks this leads to the mentioned problem.

I tried to change your .item_container to the float: left; concept (see display, width and float properties):

.item_container {
  position: relative;
  display: block;
  width: 65px;
  float: left;
  cursor: pointer;
  box-shadow: 0px 1px 4px -2px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.21);
  margin-right: 10px;
  margin-bottom: 11px;
  margin-top: 1px;
}

and it works without changing height.

Now the only thing to fix is the ul: it needs to be stretched when the content is bigger than it. So I also added overflow: hidden; to #myItems which solves this particular problem.

Upvotes: 0

Related Questions