I have some elements that have a relative width. however, when I drag one of these elements using the jquery UI's draggable() method, it shifts based on where I'd like to drag it. I tried the following code, attempting to use the start and stop callbacks:

HTML:

<ul id='item-list'>  
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

#item-list {
  width: 40%;
}

#item-list li {
  width:  100%;
}

JavaScript

$("#item-list li").draggable({
  revert : true,
  helper : 'clone',
  start : function() {
    $(this).css('width',$(this).width());
  },
  stop : function() {
    $(this).css('width','100%');
  }
});

However, this only seems to work the second time I drag objects. is there some way to get this to work properly?

I have some elements that have a relative width. however, when I drag one of these elements using the jquery UI's draggable() method, it shifts based on where I'd like to drag it. I tried the following code, attempting to use the start and stop callbacks:

HTML:

<ul id='item-list'>  
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

#item-list {
  width: 40%;
}

#item-list li {
  width:  100%;
}

JavaScript

$("#item-list li").draggable({
  revert : true,
  helper : 'clone',
  start : function() {
    $(this).css('width',$(this).width());
  },
  stop : function() {
    $(this).css('width','100%');
  }
});

However, this only seems to work the second time I drag objects. is there some way to get this to work properly?

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-draggable

Share Improve this question Follow asked Jul 23, 2012 at 15:40 GStoGSto 42.4k3737 gold badges136136 silver badges188188 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Is that it? http://jsfiddle/CGQkB/

The trick is to address the of the ui.helper not just $(this) since that just points to the original <li> tag.