Question

我正在尝试创建可拖动且可调整大小的div。现在，如果我在设计时硬编码一个div，它就可以了。但是，如果我在运行时添加div，则draggable不起作用。

/*----------------------*/

. movingDiv { 
    border: 1px solid;
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    resize: both;
    overflow: auto;
    position: absolute;
}
/*-----------------*/

.........
.........
 <div id="source">
</div>
<div id="container">    
<div class="movingDiv">
    <p>Drag and resize</p>
</div>
</div>
</body>

<script>
  $("#source").click(function () {
      $("#container").append('<div class="movingDiv"></div>');
    });

  $(".movingDiv").resizable().draggable();
</script>

Answer 1

你应该成功：

$("#container").append('<div class="movingDiv"></div>').draggable().resizable();

这种方式draggable()和resizable()在每个新div上调用，而不是在执行开始时创建一次。

Answer 2

以下是@TimTheEnchanter已经提出的一个实例：

$("#source").click(function () {
  $("#container").append($('<div class="movingDiv"><p>Drag and resize</p</div>').draggable().resizable());
});

.movingDiv { 
    border: 1px solid;
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    overflow: hidden;
    position: absolute;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="source">source</div>
<div id="container">    

</div>

Answer 3

尝试下面的内容;

  $("#source").click(function() {
    $("#container").append('<div class="movingDiv ui-widget-content">Drag and resize</div>');
    dragAndResize();
  });

  function dragAndResize() {
    $(".movingDiv").resizable().draggable();
  }

.movingDiv {
  border: 1px solid;
  width: 150px;
  height: 150px;
  padding: 0.5em;
  resize: both;
  overflow: auto;
  position: absolute!important;
}

    #test {
        width: 150px;
       border: 1px solid;
        height: 150px;
        padding: 0.5em;
    }

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="container">
   <input id="source" type="button" value="Click Me to Drag and Resize" />

    <div id="test">
        This will not be resizeable or draggable
    </div>
   
</div>

可拖动和可调整大小的div

3 个答案: