JQuery UI - Draggable-Droppable 行为答案

【问题标题】：JQuery UI - Draggable-Droppable behavioursJQuery UI - Draggable-Droppable 行为
【发布时间】：2012-09-17 07:30:33
【问题描述】：

我已经使用 JQuery UI 实现了拖放功能 - 下面提供了我当前的代码：

我的 JavaScript 函数从 PHP 接收 JSON 数组，然后使用循环创建可拖动元素：

<script type="text/javascript">
    function init() {
        var items = <?php echo $result_j;?>; //items is an one dimensional array

        for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {      
            $('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
         }

使用 'items' 数组，我创建了几个 div 元素（上面的代码），然后我将它们变成可拖动的元素（下面的代码）。

         $(".snk_button").draggable( {
            containment: '#drag_section',//Div #drag_section contains the Div #drag 
            stack: '#drag div',
            cursor: 'move',
            revert: true
         } )

以下是我的可放置代码：

$( "#dropp" ).droppable(
   drop: handleDrop
});

function handleDrop( event, ui ) {
    ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop

到目前为止，一切都很好，可拖动项目将自身附加到可放置 div。

现在，我想稍微调整一下这个行为：

我希望可拖动项目在可放置 div 中“自动”排列（在本例中称为“#dropp”），从左上角开始（它们将向左浮动）。目前，即使 '#dropp' div 设置了 'float:left' 属性，这种情况也不会发生。那么，当拖放到“#dropp”上时，我应该怎么做才能让可拖动项目自行排列？
当我从可拖放的 div 中取出一个可拖动的项目（'#dropp'）时，我希望它返回到最初包含可拖动项目的 div（在本例中为“#drag”）。

您能帮忙实现这两种行为吗？

【问题讨论】：

标签： jquery-ui drag-and-drop

【解决方案1】：

在我自己尝试这个和一些研发近 5-6 小时后，我已经能够解决我的两个问题。为了其他可能面临相同问题的人的利益，以下是实现上述行为所需的附加代码：

$( "#dropp" ).droppable({
    accept: '#drag div',
    drop: function(event, ui)
    {
    $("div#dropp").append (ui.draggable); 
    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" })
               .addClass("moved");
    } // End function for handling drop on '#dropp'
}); //End $( "#dropp" ).droppable

这是新增的：

$( "#drag" ).droppable({
accept : ".moved",
drop : function (event, ui)
{
    $("div#drag").append (ui.draggable);
    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" });

} // End function for handling drop on '#drag'
}); // End $( "#drag" ).droppable

这就是实现上述行为所必需的。希望有人发现这些信息有用:-)

【讨论】：