Skip to content

Instantly share code, notes, and snippets.

@aynm142

aynm142/jquery

Created May 16, 2017 18:19
Show Gist options
  • Save aynm142/be56b05f858b06c3c6f1807a4e4f770a to your computer and use it in GitHub Desktop.
Save aynm142/be56b05f858b06c3c6f1807a4e4f770a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jquery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.draggable { width: 90px; height: 90px; border: 1px solid black; }
#containment-wrapper { width: 500px; height:500px; border:2px solid #ccc; }
#image { border: 1px solid }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("body").dblclick(function(){
$("body").append("<div class='draggable ui-widget-content'>new text</div>");
$('.draggable').draggable({containment: "#containment-wrapper", scroll: false });
});
});
</script>
</head>
<body>
<img src="animals.jpg" id="containment-wrapper" class="image">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment