小编mrc*_*lee的帖子

我有一个我想要排序的列表.我通过使用jQuery UI Sortable完成了这个.我想要做的是使用自定义占位符来清除列表项的位置.我无法弄清楚的是如何制作一个占位符,它是被排序项目的克隆.我想要显示正在排序的项目的克隆,而不是空的占位符,这样你就可以得到一种"预览".

简而言之,ui.item [0] .outerHTML是我想用作自定义占位符的东西,我似乎无法得到它.

  <script>
  $(function() {
    $( "#menu" ).sortable({
        start: function(event,ui) {
            console.log(ui.item[0].outerHTML);
        },
        placeholder: {
            element: function(event,ui) {
                console.log(ui.item[0].outerHTML);
            }
        }
    });
    $( "#menu" ).disableSelection();
  });
  </script>

以上是我现在所拥有的,但这显然不起作用.有没有一种简单的方法来完成这项工作,只能进行排序？

我正在尝试创建一个删除按钮,一旦您单击它,展开以显示删除选项,因此您不会错误地删除任何内容.问题是父容器立即跳到全尺寸,而我希望它逐渐增长.

当我为父容器设置固定像素宽度时,这可以克服,但问题是我并不总是知道内容的宽度.因此,我使用一个百分比来使其动态化.

我真的不知道如何解释它,所以我已经做了一个小提示给你看:http://jsfiddle.net/cgHcP/

HTML:

<div class="right">
    <div style="background-color: #000; display: inline-block;">
        <div class="roll-button">
            <div class="icon">x</div>
            <div class="text">Remove</div>
        </div>
    </div>
    <div style="background-color: #000; display: inline-block;">
        <div class="roll-button">
            <div class="icon">x</div>
            <div class="text">Remove</div>
        </div>
    </div>
</div>

CSS:

/* Roll Button */
div.roll-button {
    float: right;
    display: inline;
    position: relative;
    height: 24px;
    width: 24px;
    -webkit-box-shadow: 0 0 0 2px #fff;
    -webkit-border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    overflow: hidden;
    -webkit-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}

div.roll-button .icon …