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({...}); 
});

또는 추가 된 각 요소에 $ .resizable를 호출해야 플러그인 http://archive.plugins.jquery.com/project/livequery에 당신은 새로운 요소에 모두 resizable 및 draggable 기능을 추가 할 필요가

출처

2013-02-02 14:19:28 AHOYAHOY

$(".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에 추가에 대한 것을이

$("#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); 
    } 
    }); 
}); 

});

처럼되지 드래그 및 크기 조정 Chenge 코드

출처

2013-02-02 14:42:25

jQuery div 추가 및 이동/크기 조정

답변

관련 문제