Jquery-ui可拖动且动态的Jquery-ui可拖动? [英] Jquery-ui draggable and dynamic Jquery-ui draggable?

查看:93
本文介绍了Jquery-ui可拖动且动态的Jquery-ui可拖动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我的代码来自 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中看到使用append。但是新生成的drggable对象并没有拖动,尽管我已经给出了jquery-ui生成的类。

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.

推荐答案

尝试调用 $(。draggable)。draggable(); 一旦添加了动态创建的元素。

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();
    });
});

工作演示

这篇关于Jquery-ui可拖动且动态的Jquery-ui可拖动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆