我正在嘗試使用動態生成的文本框進行拖放操作。但它不起作用

這是我的代碼。此代碼與靜態文本框一起工作，但是當我動態添加文本框時，它不起作用。我正在嘗試使用動態生成的文本框進行拖放操作。但它不起作用

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

來源

2015-06-23 Yashasvi

請在生成動態文本框後綁定可拖動＆Droppable事件。 –

你可以編寫代碼如何生成動態文本框。 –

動態生成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); 
     } 
});

來源

2015-06-23 10:32:37

我已經完成了相同的代碼，它的工作方式很不同。感謝您的回答。我很感激。 – Yashasvi

@Yashasvi我要求您發佈答案，以便將來對其他人有所幫助！ –

我做這個代碼解決這個問題。

$（'＃divDroppable'）。append（_field）; $（「＃fieldText」）拖動（{ 復歸：「有效」，幫手： '克隆'，開始：函數（事件，UI）{$ （本）.fadeTo（ '快'，0.5） ;（ }， stop：function（event，ui）

來源

2015-06-23 11:20:41 Yashasvi

<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>

來源

2015-12-23 07:41:57 Naresh

我正在嘗試使用動態生成的文本框進行拖放操作。但它不起作用

回答

相關問題