Question

我有一个代码，只需点击一下按钮即可添加元素。

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

该元素无法拖动？这是为什么？

Answer 1

您不能使用input元素，将其包含在span

中

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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中找到了此解决方法。

如何使前置元素可拖动

2 个答案: