Need help fixing with draggable UI Javascript

[Velociraptor]

Greetings,

New and still newbie to coding, I am working on a drag-able UI.

What I'm trying to achieve is to make sure that the card can be moved manually by dragging to any area.
So base area to area 1 or area 2 and back to base area.

Currently it is bugged, any card that is dragged into area 1 will be locked and cannot be dragged to anywhere anymore.

The solution I am looking for also needed for more area, in case I am adding area 3, 4, 5, and so on.

codepen.io/Velocodes/pen/RZMayE


Thank you in advance.

[Peter]

Use multi selectors for the "droppable" for the gallery.

Edited your code, give this a try.

$( function() {

   // There's the gallery and the segment
   var $gallery = $( "#gallery" ),
     $segment = $( "#segment" );

   // Let the gallery items be draggable
   $( "li", $gallery ).draggable({
     cancel: "a.ui-icon", // clicking an icon won't initiate dragging
     revert: "invalid", // when not dropped, the item will revert back to its initial position
     containment: "document",
     helper: "clone",
     cursor: "move"
   });

   // Let the segment be droppable, accepting the gallery items
   $segment.droppable({
     accept: "#gallery > li",
     classes: {
       "ui-droppable-active": "ui-state-highlight"
     },
     drop: function( event, ui ) {
       deleteImage( ui.draggable );
     }
   });

   // Let the gallery be droppable as well, accepting items from the segment
   $gallery.droppable({
     accept: "#segment li,#segment2 li",
     classes: {
       "ui-droppable-active": "custom-state-active"
     },
     drop: function( event, ui ) {
       recycleImage( ui.draggable );
     }
   });

   // Image deletion function
   var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
   function deleteImage( $item ) {
     $item.fadeOut(function() {
       var $list = $( "ul", $segment ).length ?
         $( "ul", $segment ) :
         $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $segment );

       $item.find( "a.ui-icon-segment" ).remove();
       $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
         $item
           .animate({ width: "48px" })
           .find( "img" )
             .animate({ height: "36px" });
       });
     });
   }

   // Image recycle function
   var segment_icon = "<a href='link/to/segment/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-segment'>Delete image</a>";
   function recycleImage( $item ) {
     $item.fadeOut(function() {
       $item
         .find( "a.ui-icon-refresh" )
           .remove()
         .end()
         .css( "width", "96px")
         .append( segment_icon )
         .find( "img" )
           .css( "height", "72px" )
         .end()
         .appendTo( $gallery )
         .fadeIn();
     });
   }

   // Image preview function, demonstrating the ui.dialog used as a modal window
   function viewLargerImage( $link ) {
     var src = $link.attr( "href" ),
       title = $link.siblings( "img" ).attr( "alt" ),
       $modal = $( "img[src$='" + src + "']" );

     if ( $modal.length ) {
       $modal.dialog( "open" );
     } else {
       var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
         .attr( "src", src ).appendTo( "body" );
       setTimeout(function() {
         img.dialog({
           title: title,
           width: 400,
           modal: true
         });
       }, 1 );
     }
   }

   // Resolve the icons behavior with event delegation
   $( "ul.gallery > li" ).on( "click", function( event ) {
     var $item = $( this ),
       $target = $( event.target );

     if ( $target.is( "a.ui-icon-segment" ) ) {
       deleteImage( $item );
     } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
       viewLargerImage( $target );
     } else if ( $target.is( "a.ui-icon-refresh" ) ) {
       recycleImage( $item );
     }

     return false;
   });
 } );





 $( function() {

   // There's the gallery and the segment2
   var $gallery = $( "#gallery" ),
     $segment2 = $( "#segment2" );



   // Let the segment2 be droppable, accepting the gallery items
   $segment2.droppable({
     accept: "#gallery > li",
     classes: {
       "ui-droppable-active": "ui-state-highlight"
     },
     drop: function( event, ui ) {
       deleteImage( ui.draggable );
     }
   });


   // Image deletion function
   var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
   function deleteImage( $item ) {
     $item.fadeOut(function() {
       var $list = $( "ul", $segment2 ).length ?
         $( "ul", $segment2 ) :
         $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $segment2 );

       $item.find( "a.ui-icon-segment2" ).remove();
       $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
         $item
           .animate({ width: "48px" })
           .find( "img" )
             .animate({ height: "36px" });
       });
     });
   }

   // Image recycle function
   var segment2_icon = "<a href='link/to/segment2/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-segment2'>Delete image</a>";
   function recycleImage( $item ) {
     $item.fadeOut(function() {
       $item
         .find( "a.ui-icon-refresh" )
           .remove()
         .end()
         .css( "width", "96px")
         .append( segment2_icon )
         .find( "img" )
           .css( "height", "72px" )
         .end()
         .appendTo( $gallery )
         .fadeIn();
     });
   }

   // Image preview function, demonstrating the ui.dialog used as a modal window
   function viewLargerImage( $link ) {
     var src = $link.attr( "href" ),
       title = $link.siblings( "img" ).attr( "alt" ),
       $modal = $( "img[src$='" + src + "']" );

     if ( $modal.length ) {
       $modal.dialog( "open" );
     } else {
       var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
         .attr( "src", src ).appendTo( "body" );
       setTimeout(function() {
         img.dialog({
           title: title,
           width: 400,
           modal: true
         });
       }, 1 );
     }
   }

   // Resolve the icons behavior with event delegation
   $( "ul.gallery > li" ).on( "click", function( event ) {
     var $item = $( this ),
       $target = $( event.target );

     if ( $target.is( "a.ui-icon-segment2" ) ) {
       deleteImage( $item );
     } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
       viewLargerImage( $target );
     } else if ( $target.is( "a.ui-icon-refresh" ) ) {
       recycleImage( $item );
     }

     return false;
   });
 } );

[Velociraptor]

Thank you very much, that's what I'm looking for.