Javascript jquerydrag&；放置项自动转到占位符

我得到了以下结构：

问题：

可拖动项应放在占位符处。每个可拖动项都有一个类（红色、蓝色、绿色等），只有具有相同颜色的占位符才接受它。我的问题是，当一个可拖动的项目被放入黄色框中时，它应该自动进入其占位符：例如，你将红色项目放入黄色框中，占位符应该接受它。当前，要使占位符接受项目，应将项目拖动到占位符的正上方

我的研究：

我已经检查了数据库中的几乎所有内容，找不到类似的例子

代码：
我的代码很简单

element.droppable({
    accept: "[cat='" + attrs.droppable + "']",
    activeClass: "ui-state-default",
    drop: function(event, ui) {
            //on drop code
    }
});

连同

element.draggable({
    revert: "invalid",
    start: function(event, ui) {
        //code

    },
    stop: function(event, ui) {
        //etc
    }
})

我在文档中遗漏了什么吗

我非常感谢您的帮助：）
您可以试试这个。仅使黄色框可拖放，然后将拖动的项目重新定位到内部相应的占位符框中

$("#yellowBox").droppable({
    activeClass: "ui-state-default",
    drop: handleDrop
});

function handleDrop( event, ui ) {

  // Get the color of the dragged element
  var draggedColor = ui.draggable.attr ('class');

   ui.draggable.addClass( 'correct' );
   ui.draggable.draggable( 'disable' );

    // Reposition to the placeholder box with the same color
   ui.draggable.position( { of: $(this,'.'+draggedColor), my: 'left top', at: 'left top' } );
   ui.draggable.draggable( 'option', 'revert', false );
} 

这正是我需要的。谢谢