CodePen

HTML

            
              <div class="dragThis" id="box-1"style="top: 100px; left: 50px;" >
  <h2>Test 1</h2>
  <p>This is a test</p>
  <ul>
    <li class="posX"></li>
    <li class="posY"></li>
  </ul>
</div>

<div class="dragThis" id="box-1" style="top: 50px; left: 100px;" >
  <h2>Test 2</h2>
  <p>This is a test</p>
  <ul>
    <li class="posX"></li>
    <li class="posY"></li>
  </ul>
</div>
            
          
!
via HTML Inspector

CSS

            
              .dragThis {
    min-width: 50px;
    max-width: 300px;
    min-height: 50px;
    max-height: 400px;
    overflow: auto;
    padding: 10px;
  
    background: #efefef;
    border: 3px solid #ccc;
    border-radius: 10px;
  
    display: inline-block;
  
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.dragThis h2 {
	font-size: 20px;
	margin: 0;
	padding: 0;
}

.dragThis ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
    var a = 3;

	$('.dragThis').draggable(
	{
		start: function(){
			$(this).css("z-index", a++);
		},
		drag: function(){
			var offset = $(this).offset();
			var xPos = offset.left;
			var yPos = offset.top;
			$('.posX').text('x: ' + xPos);
			$('.posY').text('y: ' + yPos);
		}
	});

	$('.dragThis').click(function(){
      $(this).addClass('top').removeClass('bottom');

		$(this).siblings().removeClass('top').addClass('bottom');
		$(this).css("z-index", a++);
	});

});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................