Question

我有一个包含很多子元素的div元素，我想用“向前”和“向后”按钮替换它们。这是我目前的职能。

var bringForward = function () {
    $canvas.find('.ui-selected').insertAfter($canvas.find('.ui-wrapper:last:not(.ui-selected)'));
};

var bringBackward = function () {
    $canvas.find('.ui-selected').insertBefore($canvas.find('.ui-wrapper:first:not(.ui-selected)'));
};

这里的问题是所选元素是第一个或最后一个元素。但我想在下一个元素之前或之后移动当前元素。

这是div元素的一个例子

     <div>
        <div id="btnBackward" class="button">Back</div>
        <div id="btnForward" class="button">Forward</div>
        <div style="clear:both"></div>
        </div>
        <div id="cnv" class="Canvas ui-droppable">
    <div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 210px; height: 250px; top: 188px; left: 239px; margin: 0px;">
<img class="ui-resizable" itemid="4" src="4_large.jpg" style="width: 200px; min-height: 10px; height: 240px; padding: 5px; left: 239px; top: 188px; cursor: move; resize: none; position: static; display: block;">
</div>
     <div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 210px; height: 250px; top: 188px; left: 239px; margin: 0px;">
<img class="ui-resizable" itemid="4" src="4_large.jpg" style="width: 200px; min-height: 10px; height: 240px; padding: 5px; left: 239px; top: 188px; cursor: move; resize: none; position: static; display: block;">
</div> <div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 210px; height: 250px; top: 188px; left: 239px; margin: 0px;">
<img class="ui-resizable" itemid="4" src="4_large.jpg" style="width: 200px; min-height: 10px; height: 240px; padding: 5px; left: 239px; top: 188px; cursor: move; resize: none; position: static; display: block;">
</div>
    </div>

如何在另一个之前或之后移动div元素

0 个答案: