Javascript jQuery添加div，但可以'；t移动/调整大小_Javascript_Jquery

Javascript jQuery添加div，但可以'；t移动/调整大小

javascript jquery

Javascript jQuery添加div，但可以'；t移动/调整大小,javascript,jquery,Javascript,Jquery,我只是在玩弄jQuery，这里有点小问题。正如您在我的示例中所看到的：单击“添加div”时，将添加具有正确类的div。但是，您不能移动/调整其大小吗？为什么呢？和/或我如何才能做到这一点 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Default functionality</

我只是在玩弄jQuery，这里有点小问题。正如您在我的示例中所看到的：

单击“添加div”时，将添加具有正确类的div。但是，您不能移动/调整其大小吗？为什么呢？和/或我如何才能做到这一点

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    #wrapper { width: 500px; height: 500px; background: red; }
    .resize_drag { background-color: white; width: 150px; height: 150px;}
    #add_div { padding: 5px; background-color: yellow; width: 200px }
  </style>
  <script>


  $(function() {

    var coordinates = function(element) {

      element = $(element);

      var top = element.position().top;
      var left = element.position().left;

      $('#results').text('X: ' + left + ' ' + 'Y: ' + top);

    }

    $(".resize_drag").draggable({
        containment: 'parent',
        scroll: false,
        drag: function() {
            var $this = $(this);
            var thisPos = $this.position();
            var parentPos = $this.parent().position();
            var x = thisPos.left - parentPos.left;
            var y = thisPos.top - parentPos.top;
            $("#results").text(x + ", " + y);
        }
    });

    $( ".resize_drag" ).resizable({
      containment: 'parent',
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
        $("#results2").text(width + ", " + height);
      }
    });

    $("#wrapper").draggable({});

    $("#add_div").on("click",function() {
      $("<div class='resize_drag'>DragMe</div>").appendTo('#wrapper');
    });

  });

</script>

</head>
<body>

<div id="wrapper">

  <div class="resize_drag">
    <p>Drag me around</p>
  </div>

  <div class="resize_drag">
    <p>Drag me around2</p>
  </div>

</div> <!-- end wrapper -->

  <div id="results"></div>
  <div id="results2"></div>

  <div id="add_div">Add DIV</div>

</body>
</html>


jQuery UI可拖动-默认功能
#可拖动{宽度：150px；高度：150px；填充：0.5em；}
#包装{宽度：500px；高度：500px；背景：红色；}
.resize_拖动{背景颜色：白色；宽度：150px；高度：150px；}
#添加_div{填充：5px；背景色：黄色；宽度：200px}
$（函数（）{
变量坐标=函数（元素）{
元素=$（元素）；
var top=element.position（）.top；
var left=element.position（）.left；
$（'#results'）.text（'X:'+left+'+'Y:'+top）；
}
$（“.resize_drag”）.draggable({
包含：'父'，
卷轴：错，
拖动：函数（）{
var$this=$（this）；
var thisPos=$this.position（）；
var parentPos=$this.parent（）.position（）；
var x=thisPos.left-parentPos.left；
变量y=thisPos.top-parentPos.top；
$（“#结果”）.text（x+”，“+y）；
}
});
$（“.resize\u drag”）。可调整大小({
包含：'父'，
停止：功能（事件、用户界面）{
var-width=ui.size.width；
var height=ui.size.height；
$（“#结果2”）.text（宽度+”，“+高度）；
}
});
$（“#包装器”）.draggable（{}）；
$（“添加div”）。在（“单击”，函数（）上{
$（“DragMe”）.appendTo（“#wrapper”）；
});
});
把我拖来拖去
把我拖来拖去
添加DIV

带插件

或者必须对每个添加的元素调用$.resizeble

带插件

或者，您必须对每个添加的元素调用$.resizeable

您需要将

resizeable

和

draggable

函数都添加到新元素中，因为

$（“.resize\u drag”）。draggable（）仅适用于现有元素：
   $("#add_div").on("click",function() {
      $("<div class='resize_drag'>DragMe</div>").appendTo('#wrapper').draggable().resizable();
    });

$（“添加div”）。在（“单击”，函数（）上）{
$（“DragMe”）.appendTo（“#wrapper”）.draggable（）.resizeable（）；
});


这是一个简化版本。如果您需要使用参数/事件运行这些函数，请将它们也添加到单击处理程序。
您需要将可调整大小的和可拖动的函数都添加到新元素中，因为$（“.resize\u drag”）。拖动（）只适用于现有的元素：
   $("#add_div").on("click",function() {
      $("<div class='resize_drag'>DragMe</div>").appendTo('#wrapper').draggable().resizable();
    });

$（“添加div”）。在（“单击”，函数（）上）{
$（“DragMe”）.appendTo（“#wrapper”）.draggable（）.resizeable（）；
});


这是一个简化版本。如果需要使用参数/事件运行这些函数，请将它们也添加到单击处理程序。
问题在于添加新的div，该div不能像这样拖动和调整大小
$("#add_div").on("click",function() {
  $("<div class='resize_drag'>DragMe</div>").appendTo('#wrapper').draggable({
    containment: 'parent',
    scroll: false,
    drag: function() {
        var $this = $(this);
        var thisPos = $this.position();
        var parentPos = $this.parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        $("#results").text(x + ", " + y);
    }
  }).resizable({
     containment: 'parent',
     stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
        $("#results2").text(width + ", " + height);
     }
  });
});

}); 

$（“添加div”）。在（“单击”，函数（）上）{
$（“DragMe”）.appendTo（“#wrapper”）.draggable({
包含：'父'，
卷轴：错，
拖动：函数（）{
var$this=$（this）；
var thisPos=$this.position（）；
var parentPos=$this.parent（）.position（）；
var x=thisPos.left-parentPos.left；
变量y=thisPos.top-parentPos.top；
$（“#结果”）.text（x+”，“+y）；
}
}).可调整大小({
包含：'父'，
停止：功能（事件、用户界面）{
var-width=ui.size.width；
var height=ui.size.height；
$（“#结果2”）.text（宽度+”，“+高度）；
}
});
});
}); 
问题在于添加新的div，该div不能像这样拖动和调整大小
$("#add_div").on("click",function() {
  $("<div class='resize_drag'>DragMe</div>").appendTo('#wrapper').draggable({
    containment: 'parent',
    scroll: false,
    drag: function() {
        var $this = $(this);
        var thisPos = $this.position();
        var parentPos = $this.parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        $("#results").text(x + ", " + y);
    }
  }).resizable({
     containment: 'parent',
     stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
        $("#results2").text(width + ", " + height);
     }
  });
});

}); 

$（“添加div”）。在（“单击”，函数（）上）{
$（“DragMe”）.appendTo（“#wrapper”）.draggable({
包含：'父'，
卷轴：错，
拖动：函数（）{
var$this=$（this）；
var thisPos=$this.position（）；
var parentPos=$this.parent（）.position（）；
var x=thisPos.left-parentPos.left；
变量y=thisPos.top-parentPos.top；
$（“#结果”）.text（x+”，“+y）；
}
}).可调整大小({
包含：'父'，
停止：功能（事件、用户界面）{
var-width=ui.size.width；
var height=ui.size.height；
$（“#结果2”）.text（宽度+”，“+高度）；
}
});
});
});