无法重新定位可拖动元素

Unable to re-position a draggable element

本文关键字:拖动 元素 定位 新定位      更新时间:2023-09-26

我有一个可以拖动的div,并试图让用户能够构建一些内容。我让它做我想做的大部分事情:

我从左边的工具栏拖动一个div,它落在右边的容器中。如果你不把它放在那个容器里,它就会优雅地浮回原来的位置。

我的问题是:一旦我把它掉了,我就不能再把它移到同一个容器里的另一个地方。我该怎么解决这个问题?

注意:我使用的是jQuery:1.11和jQuery UI 1.10

     // Draggable elements
        $("#draggable_div").draggable({
            cursor : 'move',
            snap : '#target_builder',
            revert : function(event, ui) {
                $(this).data("uiDraggable").originalPosition = {
                    top : 0,
                    left : 0
                };
                return !event;
            },
            stop : function() {
        // do I need to re-initialize it here?  
            }
        });
        $("#target_builder").droppable();

<div>
    <div>
        <div id="draggable_div" style="color: #fefefe; background: #222; width: 100px; height: 100px;">
            <p>Div</p>
        </div>
    </div>
    <div>
        blank content
    </div>
</div>

编辑:

jsfiddle:http://jsfiddle.net/KbQDQ/

这似乎对她有用,但在我的真实代码中不是。。。hmmm…

如果删除

return !event;

元素将停留在您离开的位置:)这是正确的代码:

// Draggable elements
    $("#draggable_div").draggable({
        cursor : 'move',
        snap : '#target_builder',
        revert : function(event, ui) {
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
        },
        stop : function() {
    // do I need to re-initialize it here?  
        }
    });
    $("#target_builder").droppable();

我想明白了。我使用的是Twitter引导程序框架。我删除了类(上面没有显示),所有的工作都很好。

我认为

return !event;

&

stop : function() {
                 $("#draggable_div").draggable( "destroy" );
            }

犯了一些错误,请删除它&重试一次