JQuery在按鈕上添加多個可調整大小的div點擊

關於如何使用JQuery創建可調整大小的div，有幾篇文章。我正在使用asp.net並使用來自幾個帖子的代碼來執行此操作，該操作附在下面。我現在需要做的是有一個按鈕，當點擊時，我得到另一個克隆的可拖動和可重新分區的div，我還需要捕獲創建的每個div的x，y寬度和高度。下面的代碼捕獲這些硬編碼的代碼，並在一系列asp.net文本框中顯示這些值。JQuery在按鈕上添加多個可調整大小的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。然後在每個div添加時調用它。此外，要使用JQuery追加元素，請使用$(document.body).append("")。

最後，你不應該爲此使用一個asp：Button，但是如果你必須的話，一定要添加一個OnClientClick="return false;"屬性，否則它會提交你的頁面。

這裏的JavaScript的調整：

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在按鈕上添加多個可調整大小的div點擊

回答

相關問題