Question

我实施了一个拖拉机使用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

到目前为止，一切都很好，可拖动的项目附加到droppable div。

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

我希望可拖动项目在droppable div中自动排列（在本例中称为“＃dropp”），从左上角开始（它们将向左浮动）。目前，即使'＃dropp'div具有'float：left'属性集，也不会发生这种情况。因此，如果将可拖动的项目放在“＃dropp”上，我应该怎么做呢？
当我从droppable div（'＃dropp'）中取出一个可拖动的项目时，我希望它返回到最初包含可拖动项目的div（在此示例中为'#drag'）。

请帮助实施这两项行为？

Answer 1

在我自己和一些R＆amp; D上尝试了将近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

这是实现上述行为所必需的。希望有人发现信息有用： - ）

JQuery UI - Draggable-Droppable行为

1 个答案: