sortable ui with items deleted

sortable with dropable

by ramesh valasa

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}

.hidePlaceHolder  .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;
}


.hide {
  display: none;
}

.ui-state-highlight {
  border: 1px solid red !important;
}

JavaScript

$('.sortable1').sortable({
items: "dropable > li",
 drop: function( event, ui ) {
       console.log("sortable1 drop")
      },
});

var  removeIntent = false;
$('.sortable2').sortable({
    connectWith: '.sortable1',
    helper: "clone",
     drop: function( event, ui ) {
       console.log("sortable2 drop")
      },
      sort: function( event, ui ) {
       ui.item.width('150');
      },
      out: function( event, ui ) {
       console.log("sortable2 out");
        removeIntent = true;
        $(this).addClass('hidePlaceHolder')
        
      },
      over: function( event, ui ) {
       console.log("sortable2 over");
        removeIntent = false;
        $(this).removeClass('hidePlaceHolder')
      },
      beforeStop: function( event, ui ) {
       console.log("sortable2 beforeStop");
       if(removeIntent === true) {
                
                //if (confirm('Are you sure want to remove this photo?')) {
                    ui.item.remove();
                //} else {
                  //  ui.item.show();
                //}
            }
      },
});

$( "#draggable" ).draggable();
$( ".dropable li" ).droppable({
activeClass: "ui-state-highlight",
			accept: ".sortable2 div",
			tolerance: "pointer",
			hoverClass: "drop-hover",
      drop: function( event, ui ) {
            console.log("dropable drop");
            $(this).removeClass("tabClicked");
            $(this).append('<li> '+ $(ui.helper).html() +'</li>');
            
            //debugger
            //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 =...