Question

我的设置是在垂直可排序列表中使用jquery sortable的三个div。当我将一个元素拖动到一个新位置时，我希望该元素向左移动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};
            }
        });

Answer 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");
    }
  });
});

使用填充将div的内容从左边框移动超过30个像素。如果您想移动DIV，请使用margin-left。

在jquery sortable中移动一个元素之后，我想将该元素向左移动30个像素

1 个答案: