Jquery ui jQueryUI可拖动、可拖放和可排序组合出现问题

似乎我只能选择2个：

这就是我要说的。我可以对可拖放div进行排序，也可以拖动ui-draggable，但不能将ui-draggable拖放到ui小部件头div中。：/

HTML:

JS:

$（'.adThing'）。可拖动({
光标：“指针”，
连接：'.dropme'，
助手：“克隆”，
不透明度：0.5，
zIndex:10
});
$（'.dropme'）。可排序({
连接：'.dropme'，
光标：“指针”
});
$（'.droppable'）.droppable({
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
}
});
$（“#分页加载按钮”）。单击（函数（）{
变量pageCount，i，$pageDisplay=$（“#paginationPageDisplay”），pageWidget；
$pageDisplay.html（“”）；
pageCount=$（“#分页pageCount”）.val（）；
对于（i=1；i而言，问题在于我在文档就绪时绑定了droppable，但这些元素是通过按钮单击生成的。我将droppable绑定移到了button click事件中，问题就解决了

$("#paginationLoadButton").click(function() {
    var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;

    $pageDisplay.html('');
    pageCount = $("#paginationPageCount").val();

    for (i=1; i<=pageCount; i++) {
        pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
        $pageDisplay.html($pageDisplay.html() + pageWidget);
    }

    $('.droppable').droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
        }
    });
});

$（“#分页加载按钮”）。单击（函数（）{
变量pageCount，i，$pageDisplay=$（“#paginationPageDisplay”），pageWidget；
$pageDisplay.html（“”）；
pageCount=$（“#分页pageCount”）.val（）；
对于（i=1；i
.paginationContainer {
    height: 1500px;
    margin-right: 1px;
    border: 1px solid #CCCCCC;
}

.adThing {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 8px 15px;
    border: 1px solid #ccc;
    text-align: center;
    background: #eee;
}

.dropme {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
}

.droppable {
    height: 120px;
    width: 90px;
    padding: 2px;
    margin: 10px 3px;
    background: #F9F9F9;
    border: 1px solid #CCCCCC;
    float: right;
}

$('.adThing').draggable({
    cursor: 'pointer',
    connectWith: '.dropme',
    helper: 'clone',
    opacity: 0.5,
    zIndex: 10
});

$('.dropme').sortable({
    connectWith: '.dropme',
    cursor: 'pointer'
});

$('.droppable').droppable({
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
    }
});

$("#paginationLoadButton").click(function() {
    var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;

    $pageDisplay.html('');
    pageCount = $("#paginationPageCount").val();

    for (i=1; i<=pageCount; i++) {
        pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
        $pageDisplay.html($pageDisplay.html() + pageWidget);
    }
});

$("#paginationLoadButton").click(function() {
    var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;

    $pageDisplay.html('');
    pageCount = $("#paginationPageCount").val();

    for (i=1; i<=pageCount; i++) {
        pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
        $pageDisplay.html($pageDisplay.html() + pageWidget);
    }

    $('.droppable').droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
        }
    });
});