Menu
This is my code taken from http://jqueryui.com/demos/draggable/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( ".draggable" ).draggable();
$('.content').click(function(){
var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
$('.demo').append(htmlData);
});
});
</script>
</head>
<body>
<div class="demo">
<div class="draggable ui-widget-content">
<p>Drag me around</p>
</div>
<div class="content">Test </div>
</div><!-- End demo -->
</body>
</html>
Iam making draggable component dynamically as you can see in function iam using append. But newly generated drggable object is not dragging although i have given the jquery-ui generated classes.
900
try calling $( ".draggable" ).draggable(); once the dynamically created element is added.
$(function() {
$( ".draggable" ).draggable();
$('.content').click(function(){
var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
$('.demo').append(htmlData);
$( ".draggable" ).draggable();
});
});
Working Demo
76
I'm actually going to say for performance reasons, to instead use:
$('.draggable:not(.ui-draggable)').draggable();
This will prevent attempting to re-initialize already draggable elements using jQuery UI's built in class. Also, if your code down the road modifies the properties of an individual draggable that may not match the properties of a new draggable, you could end up with some being reset.
Nothing wrong with being specific with jQuery.
UPDATE
Didn't specify for which instance to use this. Based on Ricardo's Edit:
$(function() {
$( ".draggable" ).draggable();
$('.content').click(function(){
var htmlData='<div class="draggable ui-widget-content"><p>Drag me around</p></div>';
$('.demo').append(htmlData);
$('.draggable:not(.ui-draggable)').draggable(); //Here
});
});
I'm also now seeing you were manually adding the ui-draggable class. You don't need to do that. In fact, it makes what I said not work.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
