在 jquery 可排序中移动一个元素后，我想将该元素向左移动 30 像素

【问题标题】：After moving an element in jquery sortable, I would like to move that element left by 30 pixels在 jquery 可排序中移动一个元素后，我想将该元素向左移动 30 像素
【发布时间】：2016-12-01 19:44:32
【问题描述】：

我的设置是三个 div 使用 jquery 在垂直排序列表中排序。当我将一个元素拖到一个新位置时，我希望该元素向左移动 30 个像素，以便它与其余元素明显偏移。它应该仍然是可排序列表的一部分。我已经尝试过更新方法上的位置选项选项，但它似乎不起作用。

HTML：

<div class="sortable">
    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
</div>

JS：

        $(".sortable").sortable({
            update: function (event, ui) {
                placeholder: 'placeholder';
                position: {0,-30};
            }
        });

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

我建议用 CSS 来做这个。

工作示例：https://jsfiddle.net/Twisty/sxLfpwf8/

HTML

<div class="sortable">
  <div id="1">1</div>
  <div id="2">2</div>
  <div id="3">3</div>
</div>

CSS

.indent {
  padding-left: 30px;
}

jQuery

$(function() {
  $(".sortable").sortable({
    update: function(event, ui) {
      ui.item.addClass("indent");
    }
  });
});

如果您无法执行此操作或无法修改 CSS，您可以通过带有直接样式的 jQuery 来完成。

$(function() {
  $(".sortable").sortable({
    update: function(event, ui) {
      ui.item.css("padding-left", "30px");
    }
  });
});

使用 Padding 会将 div 的内容从左边框移动 30 像素以上。如果要移动DIV，请使用margin-left。

【讨论】：