JQuery用户界面 - - 可拖动，可放开行为

我已经实现了使用JQuery UI的拖累&拖放功能我当前的代码提供如下：JQuery用户界面 - - 可拖动，可放开行为

我的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'); 
     }

随着“项的数组我已经创建了几个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（称为在这个例子中“#dropp”）“自动”安排自己，从开始左上角（他们会左移）。目前，即使'#dropp'div具有'float：left'属性集，也不会发生这种情况。那么，我应该怎样做才能让可拖动的项目在'#dropp'上放置时自行排列？
当我从droppable div（'#dropp'）中取出一个可拖动的项目时，我希望它返回到最初包含可拖动项目的div（本例中为'#drag'）。

您能否帮助实施这2种行为？

来源

2012-09-25 Shahriar N Khondokar

经过我自己和一些R & 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

这一切需要实施上述行为。希望有人发现有用的信息:-)

来源

2012-09-26 11:24:35

JQuery用户界面 - - 可拖动，可放开行为

回答

相关问题