Skip to content

Instantly share code, notes, and snippets.

@pujansrt

pujansrt/draggable.html

Last active March 24, 2019 06:28
Show Gist options
  • Save pujansrt/dcf3c1a04def13ed629aba8f12026e76 to your computer and use it in GitHub Desktop.
Save pujansrt/dcf3c1a04def13ed629aba8f12026e76 to your computer and use it in GitHub Desktop.
Download ZIP
Draggable (HTML, JS)
Raw
draggable.html
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pujan Draggable</title>
<style>
#draggable {
width: 150px; height: 150px; padding: 8px; background-color: #cde;border:2px solid;
}
i:after{
content : attr(data-content);
}
</style>
<script>
$(function() {
$('#draggable').draggable({
start: function(event, ui) {
$(this).css({"height":16,"width":16,"border-radius":20});
$(this).find('i').attr('data-content','');
},
stop: function(event, ui) {
$(this).css({"height": 150,"width":150,"border-radius":0});
var d = $(this).find('i').attr('data-content-temp');
$(this).find('i').attr('data-content',d);
}
});
});
</script>
</head>
<body>
<div id="draggable">
<i data-content=" Entity Button" data-content-temp=" Entity Button" class="fa fa-sellsy"></i>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment