jQuery拖放项目自动转到占位符

Question

我得到了以下结构：

问题：

draggable items 应放在占位符处。每个可拖动项目都有一个类（红色、蓝色、绿色等），并且只有具有相同颜色的占位符才能接受它。我的问题是，当可拖动项目被放入黄色框中时，我该如何制作它应该自动进入其占位符：例如你把红色的项目放在黄色的盒子里，占位符应该接受它。目前要使占位符接受该项目，您应该将项目完全拖动到占位符上。

我的研究：

我已经检查了http://jqueryui.com/draggable/ 和http://jqueryui.com/droppable/ 中的几乎所有内容，找不到类似的示例。

代码： 我的代码只是一个简单的

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
    }
})

我是否遗漏了文档中的某些内容？

非常感谢任何帮助:)

Answer 1

你可以试试这个。只使黄色框可放置，然后将拖动的项目重新定位到里面的适当占位符框。

$("#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 );
}