css - jQuery UI 可拖动的错误

Question

$(function () {
$(".draggable").draggable({ 
        snap: ".snap",
        revert: true
    });

    });
$(".snap").droppable({
    drop: function (event, ui) 
    {
        var drag = ui.draggable;
        var drop = $(this);
        $(this).html(drag.html());
        $(this).attr('name', drag.attr('id'));
    }
});

});

JSFiddle 链接

请在上面找到我的 jsfiddle 链接。我发现了这个以前没有发生过的奇怪错误。当第一次拖动左侧 div 时，div 正在捕捉位置，然后当我捕捉到所有右侧 div 时，我可以随意拖放而不会发生此错误。

Answer 1

注意到你有

$(".draggable").draggable()(

在小提琴而不是

$(".draggable").draggable(

那是问题 1 - 我看不到 Fiddle 中发生了什么。

问题 2 是因为在 drop 之后

html 正在进入放置 div，因此您需要更改 css。

尝试添加“浮动：左；” 到 snap css

.snap{
    width: 146px;
    height: 300px;
    display: inline-block;
    padding: 0px;
    border: 1px solid black;
    float: left;
}

您还需要更新 .fixed css 以使其显示在底部：

.fixed{
    width: 450px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    float:right;
}