sortable ui

sortable with dropable

HTML

<ul class="dropable sortable sortable1">
  <li>Item 1 1</li>
  <li>Item 1 2</li>
  <li>Item 1 3</li>
  <li>Item 1 4</li>
  <li>Item 1 5</li>
</ul>

<div class="sortable sortable2">
  <div>Item 2 1</div>
  <div>Item 2 2</div>
  <div>Item 2 3</div>
  <div>Item 2 4</div>
  <div>Item 2 5</div>
</div>

<div id="draggable" class="hide ui-widget-content drop-con">
  <div>Drag me to my target</div>
</div>

<div id="droppable" class="hide ui-widget-header drop-con">
  <p>Drop here</p>
</div>

CSS

.sortable {
    padding: 2px;
    font-size: 12px;
    border: 1px solid #aaa;
    list-style: none;
}
.sortable2 { max-width: 250px; }
.sortable li {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 2px;
    background: #fff;
    border: 1px solid #aaa;
    cursor: move;
}
.sortable div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 2px;
    background: #fff;
    border: 1px solid #aaa;
    cursor: move;
}

.sortable1 { display: flex; marigin-left: 30px; }

.sortable li { width: 54px; }

.drop-con { width: 200px; margin-top: 20px; }

.drop-con div { height: 30px}

.sortable1  .ui-sortable-placeholder { display: none; }

.droppable-el, .drop-hover { border-color: red !important }
.sortable1 .droppable-el { opacity: 1; }
.droppable-el {
  opacity: 0.5;
}

.tabClicked {
  background-color: green !important;
}

JavaScript

$('.sortable1').sortable({
cursorAt: { left: 0, top: 0 },
 drop: function( event, ui ) {
       console.log("sortable1 drop")
      },
});


$('.sortable2').sortable({
    connectWith: '.sortable1',
     drop: function( event, ui ) {
       console.log("sortable2 drop")
      },
      sort: function( event, ui ) {
       ui.item.width('150');
      },
});

$( "#draggable" ).draggable(
	drag:  function( event, ui ) {
            console.log("dropable drop");
           
      },

);
$( ".dropable li" ).droppable({
			accept: ".sortable2 div",
			tolerance: "pointer",
			hoverClass: "drop-hover",
      drop: function( event, ui ) {
            console.log("dropable drop");
            $(this).removeClass("tabClicked");
            //setTimeout(function(){  debugger; }, 0);
      },
      over: function( event, ui ) {
           ui.draggable.addClass('droppable-el');
           var self = $(this)
           // need to reset the settimeout when moved out of the tab
           setTimeout(function(){  
          // 		self.addClass("tabClicked"); 
           }, 1000)
           
           return;
           var dropConWidth = $(this).width();
           ui.draggable.width(dropConWidth - 10);

           var position = $(this).position();
           console.log(position)
           console.log( ui.draggable.position())
           
           
           // setTimeout(function(){  debugger; }, 3000);
      }, 
      out: function( event, ui ) {
      		 ui.draggable.removeClass('droppable-el');
            
           $(this).removeClass("tabClicked");
      }
    });
    
    
$( "#droppable" ).droppable({
			
      drop: function( event, ui ) {
        $( this )
          .removeClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
            
      },
       over: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
            
      }, 
      ...