Question

这是我的代码。此代码正在使用静态文本框，但是当我动态添加文本框时，它无法正常工作。

 $(function () {
        $("#fieldText").draggable({
            revert: "valid",
            helper: 'clone',
            start: function (event, ui) {
                $(this).fadeTo('fast', 0.5);
            },
            stop: function (event, ui) {
                $(this).fadeTo(0, 1);
            }
        });
       $("#dvDest").Droppable({
            drop: function (event, ui) {
                if ($("#dvDest").length == 0) {
                    $("#dvDest").html("");
                }
                ui.draggable.addClass("dropped");
                $("#dvDest").append(ui.draggable);
            }
        });
    });

Answer 1

对于动态生成的textbox，只需在下面添加它后立即将其绑定：

$('<input type="text" id="fieldText"/>')
   .appendTo("#content")
   .draggable({
       revert: "valid",
       helper: 'clone',
       start: function (event, ui) {
             $(this).fadeTo('fast', 0.5);
       },
       stop: function (event, ui) {
             $(this).fadeTo(0, 1);
       }
 });

Answer 2

我用这段代码解决了这个问题。

$（＆＃39;＃divDroppable＆＃39）。追加（_field）; $（＆＃34;＃fieldText＆＃34）。可拖动（{ 还原：＆＃34;有效＆＃34;，帮手：＆＃39;克隆＆＃39;， start：function（event，ui）{ $（this）.fadeTo（＆＃39; fast＆＃39;，0.5）; }， stop：function（event，ui）{ $（this）.fadeTo（0,1）; } }）;

Answer 3

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>I revert when I'm dropped</p>
</div>

我试图用动态生成的文本框拖放。但它不起作用

3 个答案: