jQuery ui – make an element draggable

jQuery ui can be used to make an element draggable/movable by mouse drag. Note that it does not work with touch events.

Syntax:

// After including jQuery and jQueryUI
$("#drag1").draggable();

Example

<style>
#drag1 {background-color: lightblue; width:100px;}
</style>
<div id="drag1">drag me</div>
<br><div>another div</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
  $(function() {
    $("#drag1").draggable();
  });
</script>

Few points to note

1. Element position is if static, is changed to relative by jquery code. This makes it a positioned element.
2. Element if absolute or fixed, no change in it position value is done.