JQuery 버튼 클릭시 여러 개의 Re-sizable Div 추가하기

JQuery로 크기 조정이 가능한 div를 만드는 방법에 대한 글이 몇 개 있습니다. 나는 asp.net을 사용하고 아래에 첨부 된 여러 게시물의 코드를 사용했다. 지금해야 할 일은 클릭 할 때 드래그 가능하고 크기가 재조정 가능한 또 다른 복제본을 얻는 버튼이 있고 작성된 각 div의 x, y 너비 및 높이를 캡처해야합니다. 아래의 코드는 하드 코딩 된 코드를 캡처하여 일련의 asp.net 텍스트 상자에 값을 표시합니다. 도움과 조언JQuery 버튼 클릭시 여러 개의 Re-sizable Div 추가하기

감사 CM

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" 
Inherits="Default3" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Cloned Divs</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery- 
ui.css" /> 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<style> 
    #drag { 
     width: 6em; 
     height: 6em; 
     padding: 0.5em; 
     border: 3px solid #ccc; 
     border-radius: 0 1em 1em 1em; 
     background-color: #fff; 
     background-color: rgba(255,255,255,0.5); 
    } 

    #Buttons { 
     width: 50px; 
     height: 50px; 
     left: 50px; 
     position: absolute; 
    } 
</style> 
<script> 
    $(function() { 
     $("#drag").draggable(
      { 
       containment: $('body'), 
       drag: function() { 
        var offset = $(this).offset(); 
        var xPos = offset.left; 
        var yPos = offset.top; 
        var myHeight = $("#draggable").height(); 
        $('#posX').text('x: ' + xPos); 
        $('#posY').text('y: ' + yPos); 
        $("#<%=txtX.ClientID%>").val(xPos); 
        $("#<%=txtY.ClientID%>").val(yPos); 
       } 
      }).resizable({ 
       resize: function (event, ui) { 
        var mywidth = $(event.target).width(); 
        var myHeight = $(event.target).height(); 
        $('#width').text('width: ' + mywidth); 
        $('#height').text('height: ' + myHeight); 
        $("#<%=txtWidth.ClientID%>").val(mywidth); 
        $("#<%=txtHeight.ClientID%>").val(myHeight); 
       } 

      }); 
    }); 

     $('#btnAdd').click(function() { 

      var structure = $('<div id="draggable1" class="ui-widget-content"></div>'); 
      $('#body').append(structure); 

     }); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div id="drag" class="ui-widget-content"> 
     <ul> 
      <li id="posX"></li> 
      <li id="posY"></li> 
      <li id="width"></li> 
      <li id="height"></li> 
     </ul> 
    </div> 
    <div id="Buttons"> 
     <asp:Label ID="lblX" runat="server" Text="X: "></asp:Label><asp:TextBox 
ID="txtX" runat="server"></asp:TextBox> 
     <asp:Label ID="lblY" runat="server" Text="Y: "></asp:Label><asp:TextBox 
ID="txtY" runat="server"></asp:TextBox> 
     <asp:Label ID="lblWidth" runat="server" Text="Width: "></asp:Label><asp:TextBox 
ID="txtWidth" runat="server"></asp:TextBox> 
     <asp:Label ID="lblHeight" runat="server" Text="Height: "></asp:Label> 
<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox> 
     <asp:Button ID="btnAdd" runat="server" Text="Add Div" /> 
    </div> 
</form> 
</body> 
</html>

출처

2014-02-26 CodeMechanic

음에 대한

건배, 당신은 다루는 몇 가지 심각한 CSS 문제가 있습니다. 이 문제를 입력하지는 않지만 div 추가에 대한 질문에 대답하겠습니다.

가장 쉬운 방법은 "$ .draggable"이벤트를 별도의 메서드로 바꾸고 id가 아닌 클래스로 draggable 속성을 적용하는 것입니다. 그런 다음 모든 div에 추가하십시오. 또한 JQuery를 사용하여 요소를 추가하려면 $(document.body).append("")을 사용하십시오.

마지막으로 asp : Button을 사용해서는 안되지만 반드시 수행해야하는 경우 OnClientClick="return false;" 속성을 추가하십시오. 그렇지 않으면 페이지가 전송됩니다.

다음은 자바 스크립트 조정의 :

function ApplyDrag() { 
    $(".draggable").draggable(
    { 
     containment: $('body'), 
     drag: function() { 
      var offset = $(this).offset(); 
      var xPos = offset.left; 
      var yPos = offset.top; 
      var myHeight = $("#draggable").height(); 
      $('#posX').text('x: ' + xPos); 
      $('#posY').text('y: ' + yPos); 
      $("#<%=txtX.ClientID%>").val(xPos); 
      $("#<%=txtY.ClientID%>").val(yPos); 
     } 
    }).resizable({ 
     resize: function(event, ui) { 
      var mywidth = $(event.target).width(); 
      var myHeight = $(event.target).height(); 
      $('#width').text('width: ' + mywidth); 
      $('#height').text('height: ' + myHeight); 
      $("#<%=txtWidth.ClientID%>").val(mywidth); 
      $("#<%=txtHeight.ClientID%>").val(myHeight); 
     } 

    }); 
} 

$(function() { 
    ApplyDrag(); 

    $('#<%=btnAdd.ClientID %>').click(function() { 
     var structure = $('<div class="draggable ui-widget-content">BLABLA</div>'); 
     $(document.body).append(structure); 
     ApplyDrag(); 
    }); 
});

출처

2014-02-26 21:10:44 LcSalazar

이 내가 찾던 정확히 것입니다. 대단하고 빠른 답변에 많은 감사드립니다. – CodeMechanic

JQuery 버튼 클릭시 여러 개의 Re-sizable Div 추가하기

답변

관련 문제