1

私はjQueryで遊んでいるだけで、ここで少し問題が発生しています。あなたが私の例で見ることができるように：http：//jsfiddle.net/wzdzc/

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

3 に答える 3

1

既存の要素でのみ機能するため、両方の関数resizableとdraggable関数を新しい要素に追加する必要があります。$(".resize_drag").draggable()

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

フィドル

これは簡易版です。これらの関数をパラメーター/イベントで実行する必要がある場合は、それらをクリック ハンドラーにも追加します。

于 2013-02-02T14:28:23.853 に答える
0 
$('.resize_drag').livequery(function() {
  $(this).resizable({...});
});

http://archive.plugins.jquery.com/project/livequeryプラグインを使用

または、追加された要素ごとに$.resizableを呼び出す必要があります

于 2013-02-02T14:19:28.277 に答える
0

問題は、新しい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);
     }
  });
});

});
于 2013-02-02T14:42:25.137 に答える