どのようにprepended要素をdraggableにしますか

Question

ボタンをクリックすると要素を追加するコードがあります。

$(document).ready(function(){ 
 
    $("#add_txt").click(function(){ 
 
     $("body").prepend('<input class="style_txt">'); 
 
    }); 
 
}); 
 

 

 
//However when I add... 
 

 
$(function() { 
 
    $(".style_txt").draggable(); 
 
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<button class="btn" id="add_txt">Add Text</button>

要素がドラッグすることはできませんか？どうしてこれなの？

Answer 1

あなたは、input要素でそれを行うことはできません

$(document).ready(function() { 
 
    $("#add_txt").click(function() { 
 
    $("body").prepend('<span><input class="style_txt"></span>'); 
 
    $(".style_txt").parent().draggable(); 
 
    }); 
 
});

span { 
 
    padding: 5px; 
 
    border: 1px solid #eee; 
 
    cursor: move; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<button class="btn" id="add_txt">Add Text</button>

Answer 2

あなたはこのようにそれを行うことができますスパン内でそれをラップ：

$(document).ready(function() { 
 
    $("#add_txt").click(function() { 
 
    $("body").prepend('<div class="style_text"><input /></div>'); 
 

 
    $(".style_text").draggable({ 
 
     start: function(event, ui) { 
 
     $(this).data("preventBehaviour", true); 
 
     } 
 
    }); 
 
    $(".style_text :input") 
 
     .on("mousedown", function(e) { 
 
     var mdown = document.createEvent("MouseEvents"); 
 
     mdown.initMouseEvent(
 
      "mousedown", 
 
      true, 
 
      true, 
 
      window, 
 
      0, 
 
      e.screenX, 
 
      e.screenY, 
 
      e.clientX, 
 
      e.clientY, 
 
      true, 
 
      false, 
 
      false, 
 
      true, 
 
      0, 
 
      null 
 
     ); 
 
     $(this).closest(".style_text")[0].dispatchEvent(mdown); 
 
     }) 
 
     .on("click", function(e) { 
 
     var $draggable = $(this).closest(".style_text"); 
 
     if ($draggable.data("preventBehaviour")) { 
 
      e.preventDefault(); 
 
      $draggable.data("preventBehaviour", false); 
 
     } 
 
     }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<button class="btn" id="add_txt">Add Text</button>

これはかなり複雑な答えですが、うまくいきます。注：この回避策はanother answerにあります。