javascript Jquery-ui 可拖动和动态 Jquery-ui 可拖动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7660606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery-ui draggable and dynamic Jquery-ui draggable?
提问by Ali Nouman
This is my code taken from http://jqueryui.com/demos/draggable/
这是我的代码取自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.
我正在动态制作可拖动组件，正如您在使用 append 的函数 iam 中看到的那样。但是新生成的 drggable 对象并没有拖动，尽管我已经给出了 jquery-ui 生成的类。
回答by Ricardo Binns
try calling $( ".draggable" ).draggable();once the dynamically created element is added.
$( ".draggable" ).draggable();添加动态创建的元素后尝试调用。
$(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();
});
});
回答by Kyle Macey
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.
这将防止尝试使用 jQuery UI 的内置类重新初始化已经可拖动的元素。此外，如果您的代码修改了单个可拖动的属性，而这些属性可能与新的可拖动的属性不匹配，那么您最终可能会重置某些属性。
Nothing wrong with being specific with jQuery.
特定于 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.
我现在还看到您正在手动添加 ui-draggable 类。你不需要这样做。事实上，它使我所说的不起作用。
回答by user3791372
I would recommend doing it like this because if you want to pass a configuration object to the draggable function, you won't have to repeat it in two different places:
我建议这样做，因为如果您想将配置对象传递给可拖动函数，则不必在两个不同的地方重复它：
<script>
$(function() {
setDraggable();
$('.content').click(function(){
var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
$('.demo').append(htmlData);
setDraggable();
});
});
function setDraggable(){
$( ".draggable" ).draggable();
}
</script>
回答by Robin Rizvi
<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>
Just a need for position changing is needed
只需要改变位置
<script>
$(function() {
$(".content").click(function(){
var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
$(".demo").append(htmlData);
$(".draggable").draggable(); //bring it here so that for the newly inserted/created dom elements, jquery draggable can be initialized.
});
});
</script>
