Question

好像我只能选择2. :)

这是我在的地方。我可以对droppable div进行排序，我可以拖动ui-draggable，但我不能将ui-draggable放入ui-widget-header div中。：/

HTML：

<div class="large-9 small-9 columns">
    <div id="paginationPageDisplay" class="dropme paginationContainer ui-sortable">
        <div class="droppable ui-widget-header">
        <div class="droppable ui-widget-header">
    </div>
</div>
<div class="large-3 small-3 columns">
    <div id="paginationAdDisplay" class="paginationContainer">
        <div class="adThing ui-draggable">1/4</div>
        <div class="adThing ui-draggable">1/2</div>
        <div class="adThing ui-draggable">Full Page</div>
    </div>
</div>

CSS：

.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;
}

JS：

$('.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);
    }
});

Answer 1

问题是我在文档就绪上绑定了droppable，但这些元素是通过按钮点击生成的。我将droppable绑定移动到按钮单击事件中并且已解决。

$("#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!" );
        }
    });
});

jQuery UI可拖动，可放置和可排序组合的问题

1 个答案: