Draggable Demo

It is a draggable demo with reposition property.

by Junaid Ali

HTML

<div class="row flex">
	<button class="space-between button horizontal">Horizontal</button>
	<button class="space-between button vertical">Vertical</button>
</div>

<div class= "flex-container">
	<div id="draggable1" class="ui-widget-content1">
		<p>Object 1</p>
	</div>

	<div id="draggable2" class="ui-widget-content2">
		<p>Object 2</p>
	</div>

	<div id="draggable3" class="ui-widget-content3">
		<p>Object 3</p>
	</div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.ui-widget-content1 {
	padding: 10px;
  margin: 10px;
	width: 30%;
	height: 70px;
	background-color: white;
}

.ui-widget-content2 {
	padding: 10px;
  margin: 10px;
	width: 40%;
	height: 70px;
	background-color: white;
}

.ui-widget-content3 {
	padding: 10px;
  margin: 10px;
	width: 70%;
	height: 70px;
	background-color: white;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.horizontal {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.vertical {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.flex-container {
	width: 100%;
	height: 700px;
  display: flex;
  flex-direction: column;
}

JavaScript

var draggable_left = [];

$( "#draggable1" ).draggable({
  containment : ".flex-container",
  stop: function(e, ui) {
    draggable_left[0] = ui.position.left;
  }
});

$( "#draggable2" ).draggable({
  containment : ".flex-container",
  stop: function(e, ui) {
    draggable_left[1] = ui.position.left;
  }
});

$( "#draggable3" ).draggable({
  containment : ".flex-container",
  stop: function(e, ui) {
    draggable_left[2] = ui.position.left;
  }
});

function reset(elemId, left_val, outWidthElem) {
  var containerWidth = $(".flex-container").width();

  $(elemId).css({
    "right": (containerWidth - (left_val + outWidthElem)),
    "left": "auto",
    "top": "auto"
  });
}

function resetALL(draggable_left, direction){
  var outWidth = []; 
  outWidth[0] = $("#draggable1").outerWidth();
  outWidth[1] = $("#draggable2").outerWidth();
  outWidth[2] = $("#draggable3").outerWidth();
  
  reset("#draggable1", draggable_left[0], outWidth[0]);
  reset("#draggable2", draggable_left[1], outWidth[1]);
  reset("#draggable3", draggable_left[2], outWidth[2]);
	
	$('.flex-container').css({
    'flex-direction': direction
  });
}

$(".horizontal").click(function(draggable_left) {
  resetALL(draggable_left, "row");
});

$(".vertical").click(function(draggable_left) {
  resetALL(draggable_left, "column");
});