0

好像我只能选择2个。:)

这就是我所在的地方。我可以对可放置的 div 进行排序，也可以将 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);
    }
});
4

1 回答 1

0

问题是我在准备好文档时绑定了 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!" );
        }
    });
});
于 2013-09-17T19:54:41.150 回答