jQuery添加div，但無法移動/調整大小

我只是玩弄jQuery，而我在這裏有一個小問題。正如你可以在我的例子中看到：http://jsfiddle.net/wzdzc/jQuery添加div，但無法移動/調整大小

當你點擊「添加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>

來源

2013-02-02 Kevin Jolan

$('.resize_drag').livequery(function() { 
    $(this).resizable({...}); 
});

與http://archive.plugins.jquery.com/project/livequery插件

，或者你必須調用$ .resizable每個添加元素

來源

2013-02-02 14:19:28 AHOYAHOY

您需要兩個resizable和draggable功能添加到新的元素，因爲$(".resize_drag").draggable()作品現有的只有：

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

fiddle

這是一個簡化版本。如果您需要使用參數/事件運行這些函數，請將它們添加到點擊處理程序中。

來源

2013-02-02 14:28:23 AlecTMH

問題是添加新的div不能拖動和resizable Chenge這樣的代碼

$("#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-02 14:42:25

jQuery添加div，但無法移動/調整大小

回答

相關問題