将一个被删除的元素组织成另一个元素

Question

我正在开发一个类似的项目。我将一些元素拖放到一些droppables并再次向外移动到中间。每个droppable都可以包含许多拖动元素。当我使用一个元素时，它工作正常，但是它不止一个，它没有，我不知道如何使两个元素可拖动并将它们都放入droppable并且看起来很好。这是功能：

    $(function() {
    $( "#myDIV1,#myDIV2" ).draggable({ cursor: 'move'});
    $( ".drop" ).droppable({
      drop: function( event, ui ) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
              $( "#myDIV1,#myDIV2" ).css( "height", "50%" );
              $( "#myDIV1,#myDIV2" ).css( "width", "50%" );
              $( "#myDIV1,#myDIV2" ).find( "p" ).html( "cool!" );


      },
      out: function( event, ui ) {
        $( this )
          .addClass( "drop" )
          .find( "p" )
            .html( "Dropped! out" );
$( "#myDIV1,#myDIV2" ).css( "height", "400px" );
              $( "#myDIV1,#myDIV2" ).css( "width", "370px");              
               $( "#myDIV1,#myDIV2" ).find( "p" ).html( "Drag me to my target" );

      }
    });

  $( ".dropLeftRight" ).droppable({
      drop: function( event, ui ) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
              $( "#myDIV1,#myDIV2" ).css( "height", "50%" );
              $( "#myDIV1,#myDIV2" ).css( "width", "50%" );

              $( "#myDIV1,#myDIV2" ).find( "p" ).html( "cool!" );


      },
      out: function( event, ui ) {
        $( this )
          .addClass( "drop" )
          .find( "p" )
            .html( "Dropped! out" );
              $( "#myDIV1,#myDIV2" ).css( "height", "400px" );
              $( "#myDIV1,#myDIV2" ).css( "width", "370px");

               $( "#myDIV1,#myDIV2" ).find( "p" ).html( "Drag me to my target" );

      }
    });
  });