Path: C:\
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery UI - Selectables e Draggables</title>
<!-- Importando arquivos do jQuery e jQuery UI -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<style type="text/css">
#selectable1 {
font-size:70%;
font-family: Segoe UI, Arial;
font-weight: bold;
width:600px;
height:600px;
border:1px solid #999999;
margin:0 auto;
}
#selectable1 .ui-selecting {
background: #aad284;
border:1px solid #666666;
}
#selectable1 .ui-selected {
background: #e2ecf5;
border:1px solid #666666;
}
#selectable1 div {
position: absolute;
width: 100px;
height: 75px;
border: 1px solid #efefef;
}
#selectable1 .ui-draggable {
padding:5px;
background-color:#FFF9D8;
}
#selectable1 .ui-draggable-dragging {
background-color:#91B168;
font-color:#202020;
}
</style>
<script type="text/javascript">
$(function() {
var selecionado = $([]),
offset = {top:0, left:0};
$("#selectable1").selectable();
$("#selectable1 div").draggable({
start: function(ev, ui) {
$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
selecionado = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
$(this).text("Objetos \"Selected e dragging\"");
});
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top – offset.top, dl = ui.position.left – offset.left;
selecionado.not(this).each(function() {
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
},
stop: function(ev, ui){
$(this).text("Parou de arrastar");
}
});
});
</script>
</head>
<body>
<div id="selectable1">
<div id="dragee" >Clique para arrastar</div>
<div id="dragee" style="top:100px;">Clique para arrastar</div>
<div id="dragee" style="left:120px;">Clique para arrastar</div>
<div id="dragee" style="top:400px;left:300px;">Clique para arrastar</div>
<div id="dragee" style="top:200px;left:200px;">Clique para arrastar</div>
</div>
</body>
</html>