jQuery addClass example

Change class name on click in jQuery

by megaadriano

HTML

<div class="table" draggable="false">

  <div id="horizontal-list">
      <div class="cell" draggable="false"  style="border:none !important"></div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 1</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 2</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 3</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 4</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 5</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 6</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 7</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 8</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 9</div>
      <div class="cell" draggable="true" class="sortable-bulk">List Item 10</div>
      
  </div>
</div>
<textarea id="ordem" cols="10" rows="10">
</textarea>

CSS

li {
  cursor:move;
  display:block;
  padding:20px 10px;
  background:white;
  border-bottom:solid 1px gray;
}


.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
  border-spacing: 1px;
 height:40px;
}
.tr{
  display:table-row;
}
.cell{
  width:100px;
   display:table-cell;
   height:40px;
   vertical-align: middle;
   text-align:center;
   background-color:white;
   border:1px solid black;
   margin:2px 2px 2px 2px;
}

tr#horizontal-list {
  display:table-row;
	min-width: 696px;
	list-style: none;
	padding-top: 20px;
	}
	ul#horizontal-list li {
		display: inline;
	}

JavaScript

var dragging = null;

$('#horizontal-list').on('dragstart', function(event) {
		dragging = event.target;
    //event.dataTransfer.setData('text/html', dragging);
});

$('#horizontal-list').on('dragover', function(event) {
    event.preventDefault();
});

$('#horizontal-list').on('dragenter', function(event) {
    event.target.style['border-bottom'] = 'solid 4px blue';
    
});

$('#horizontal-list').on('dragleave', function(event) {
    event.target.style['border-bottom'] = '';
});

$('#horizontal-list').on('drop', function(event) {
    event.preventDefault();
    event.target.style['border-bottom'] = '';
    $('#ordem').text('');
   
   
   
    console.log($(event.target).text());
    event.target.parentNode.insertBefore(dragging, event.target.nextSibling);
      $( "#horizontal-list" ).children().each(function(){
    	$('#ordem').text($('#ordem').text()+'\r\n'+$(this).text());
    })
});