移動jQuery中可排序的元素後，我想將該元素左移30像素

Question

我的設置是三個使用jQuery排序在垂直排序列表中的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。