jsquery sortable with inline-block display display scratches

问题

I'm trying to play with connected sortable list with JQuery, however, if I use display:inline-block in my li CSS, the placeholder and the placement is not correct. It's usually higher, and also the items are resized so that cause wordwrap.

If I change display:inline-block by float:left here

ul.fieldlist li
{
        display:inline-block;
        list-style-type: none;
}

Then the dragdrop is working fine, but for some reasons i'm not able to drag back to the original sortable.

I have made a jsfiddle to show the problem:

http://jsfiddle.net/uArNx/5/

It might be a problem with my padding / margins but I couldn't figure out.

Any help would be welcomed :)

回答1:

The fix is vertical-align: top. As best I can tell, JqueryUI Sortables don't handle vertical-align: middle well.

Try adding vertical-align: top to your jsfiddle--it clears up the alignment issue.

There are some notes here, and an initial fix for inline block, but I think the valign middle case was missed. http://bugs.jqueryui.com/ticket/6942

回答2:

The problems here are caused by trying to sort inline blocks that each have their size determined by variable text content.

One fix would be to

1. set vertical-align: top as suggested by another user

2. either a) fix the size of each inline-block container, or else b) set white-space: nowrap on each one to prevent the doubling of line height when dragging containers that include multiple words.

   Since your containers are sized by the text in them, doing option a) would have to be in javascript, ideally when drag starts (although if the list isn't going to vary, you could do it once on page load). Something like the following (you'll have to supply the right li selector and drag event name...):

   $('.li').on('dragStart', function (e) {
     var $this = $(this);
     $this.width( $this.width() );
     $this.height( $this.height() );
   });
   

3. Finally, you might need to fix the line-height of each container to avoid situations where inline images or larger text vary the line height (not an issue in this jsfiddle example, but mentioning it for anyone else who might have that problem).

来源：https://stackoverflow.com/questions/14095451/jsquery-sortable-with-inline-block-display-display-scratches