使用jQuery UI draggable时,为元素提供临时固定宽度?

时间:2012-07-23 15:40:33

标签: javascript jquery css jquery-ui jquery-ui-draggable

我有一些具有相对宽度的元素。但是,当我使用jquery UI的draggable()方法拖动其中一个元素时,它会根据我要拖动它的位置而移动。我尝试了以下代码,尝试使用start和stop回调:

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%');
  }
});

但是,这似乎只是第二次拖动对象时才起作用。有什么方法可以让它正常工作吗?

1 个答案:

答案 0 :(得分:8)

是吗? http://jsfiddle.net/CGQkB/

诀窍是解决ui.helper而不只是$(this),因为它只指向原始<li>标记。