jQuery UI: Draggable

Draggable Elements

by nsatija

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<span class="parent" id="parent">
  <img class="image1" id="image1" src="http://54.190.57.135:8080/covers/Apple-iPhone%206.PNG" />
  <div id="draggable">
    <img class="image2" src="http://54.190.57.135:8080/uploads/3a48b74bd659a12cc2c2ccf0eaf0b344.jpg" />
  </div>
</span>

CSS

html,
body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.parent {
  overflow: hidden;
  display: inline-block;

}

img {
  max-height: 300px;
}

.image1 {
  padding: 0;
  margin: 0;
  pointer-events: none;
  position: relative;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
}

.image2 {
  position: absolute;
  z-index: 1;
  top: -300px;
  left: calc(50% - 100px);
}

JavaScript

$("#draggable").draggable();
document.getElementById('parent').setAttribute("style", "height:" + document.getElementById('image1').clientHeight + 'px');