使用JQuery将元素放在准确的位置

时间:2013-07-11 09:03:44

标签: jquery jquery-ui knockout.js

我已经创建了一个用户界面,我在其中创建了一个div,里面有多个div或插槽(比方说)。这些插槽是使用Knockout.js生成的,我的意思是这些插槽在滑块值上绑定。取决于滑块的值它会动态生成插槽。我担心的是我想在这些div上删除其他外部元素,但是当我这样做时,它会在最后一个div上下降并再次如果我再次将其删除添加到Slot的上部div .bt我希望它必须放在我放弃它的地方,即在同一个位置。也可以在两个div的中途。请建议我。我的代码如下:

<div class="slotSystem">
                        <div class="slotMachine" data-bind="foreach:slots,style:{height:height()+'px'}">
                            <div class="slot">
                                <div class="slot-info drop" data-bind="text:formatedTime,style:{height:height()+'px'}"></div>
                            </div>
                        </div>
                    </div>
$(".drop").droppable({
            accept: ".draggable",
            tolerance:"pointer",
            drop: function (event, ui) {
                console.log("drop");
                var dropped = ui.draggable;
                var droppedOn = $(this);
                $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);

                $('#clear-organizer').show();
                $('#saveplaylist').show();
                $(dropped).height(10);

                var closebtn = ui.draggable.find(' .close');
                $(closebtn).addClass('close-organizer');


            }
        });

1 个答案:

答案 0 :(得分:0)

它完全按照您在代码中告诉它执行的操作。为了使它能够完成您在问题中所写的内容,您只需要将.slotMachine DIV设为可放置的,而不是.slot-info(或者甚至是.slot)。

编辑:如果您想了解放置的DIV并将拖动的DIV放在旁边,请将.slot s droppable保留在您的放置处理程序中,并使用.insertAfter()或{{3} }(将droppedOn目标的 元素插入)而不是现在使用的.appendTo()(这会将您的元素插入 { {1}}目标)。