奇保證金跨屏幕變成引導面板

Question

我已經創建與代碼bootply更好地解釋這個問題上：

https://www.bootply.com/TvGcNno4qx

如果您添加註釋給它一個標題和內容，然後單擊添加，然後檢查你會看到帶有類的div，註釋面板dragme和其他的1有一個保證金，充滿整個屏幕。我似乎無法擺脫它。下面是一些我已經試過代碼：

.note-panel{ 
     width: 300px; 
     margin-bottom: 0px; 
     margin-top: 0px; 
     margin-left:0px; 
     margin-right: 0px; 
    } 
    .panel{ 
     margin-bottom: 0px; 
     margin-top: 0px; 
     margin-left:0px; 
     margin-right: 0px; 
    } 
    .ui-draggable{ 
     margin-bottom: 0px; 
     margin-top: 0px; 
     margin-left:0px; 
     margin-right: 0px; 
    } 

這是發生在div：

<div class='note-panel dragme' id='"+noteno+"'> 
    <div class='panel panel-primary'> 
     <div class='panel-heading'> 
      <h3 class='panel-title'>"+title+"</h3> 
     </div> 
     <div class='panel-body'>"+content+"</div> 
    </div> 
</div> 

頁面加載時，我經常並排2音符的一面，但由於他們在彼此之下而不是並排地加載的保證金問題。

任何幫助非常感謝！

Answer 1

我試圖在這裏重新創建功能。拖動似乎工作正常，面板彼此相鄰。

#noteBoardInt, 
 
header.first-row { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
} 
 

 
.first-row .h1 { 
 
    margin: 0; 
 
    margin-right: 2em; 
 
    padding: 0; 
 
} 
 

 
#addNewNote { 
 
    display: none; 
 
} 
 

 
.note-panel { 
 
    min-width: 300px; 
 
    max-width: 300px; 
 
} 
 

 
.note-panel:not(:first-child) { 
 
    margin-left: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header class="first-row"> 
 
    <h1 class="h1">Your Notes</h1> 
 
    <a class="btn btn-primary" id="addNote">Add A Note</a> 
 
</header> 
 
<div id="noteBoard"> 
 
    <div id="noteBoardInt"> 
 
    </div> 
 
</div> 
 

 
<!-- Modal --> 
 
<div id="addNewNote" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     <h4 class="modal-title">Add A new note</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row" style="margin-bottom: 15px;"> 
 
      <div class="col-md-4"> 
 
      <p>Title:</p> 
 
      </div> 
 
      <div class="col-md-8"> 
 
      <input id="title" class="form-control"> 
 
      </div> 
 
     </div> 
 
     <div class="row" style="margin-bottom: 15px;"> 
 
      <div class="col-md-4"> 
 
      <p>Content:</p> 
 
      </div> 
 
      <div class="col-md-8"> 
 
      <textarea id="noteContent" class="form-control"></textarea> 
 
      </div> 
 
     </div> 
 
     <div class="row" style="margin-bottom: 15px;"> 
 
      <div class="col-md-12"> 
 
      <div class="panel panel-primary"> 
 
       <div class="panel-heading"> 
 
       <h3 class="panel-title" id="panel-title"></h3> 
 
       </div> 
 
       <div class="panel-body" id="panel-body"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-2 col-md-offset-10"> 
 
      <button class="form-control btn btn-success" id="addPanel">Add</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script type="text/javascript" src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 

 

 

 

 
<!-- JavaScript jQuery code from Bootply.com editor --> 
 

 
<script type="text/javascript"> 
 
    var userNoteNo = 0; 
 
    var userName = "lsmith"; 
 

 

 
    $(document).ready(function() { 
 
    var response = ""; 
 
    //Put the notes on the page 
 
    $.ajax({ 
 
     url: "/myaccount/sw/note-ajax.php?command=load&username=" + userName, 
 
     type: "GET", 
 
     async: false, 
 
     success: function(data) { 
 
     var response = JSON.parse(data); 
 
     console.log(response); 
 

 
     for (var i in response) { 
 
      returnCardLoad(response[i].title, response[i].content, response[i].x, response[i].y, response[i].noteno); 
 

 
      userNoteNo++; 
 
     } 
 
     } 
 
    }); 
 
    }); 
 

 
    $("#addNote").on("click", function() { 
 
    $("#addNewNote").modal("show"); 
 
    }); 
 

 
    $("#title").on("blur", function() { 
 
    $("#panel-title").html($("#title").val()); 
 
    }); 
 

 
    $("#noteContent").on("blur", function() { 
 
    $("#panel-body").html($("#noteContent").val()); 
 
    }); 
 

 
    $("#addPanel").on("click", function() { 
 
    var html = ""; 
 
    var title = $("#title").val(); 
 
    var content = $("#noteContent").val(); 
 
    html = "<div class='note-panel dragme' id='" + userNoteNo + "'><div class='panel panel-primary'><div class='panel-heading'><h3 class='panel-title'>" + title + "</h3></div><div class='panel-body'>" + content + "</div></div></div>"; 
 
    $("#noteBoardInt").append(html); 
 

 
    //empty the inputs 
 
    $("#title").val(''); 
 
    $("#noteContent").val(''); 
 
    $("#panel-title").html(''); 
 
    $("#panel-body").html(''); 
 

 
    $("#addNewNote").modal("hide"); 
 
    addDrag(); 
 
    addToDatabase(userName, title, content, userNoteNo); 
 

 
    //LAST THING 
 
    userNoteNo++; 
 
    html = ""; 
 
    }); 
 

 
    function returnCardLoad(title, content, x, y, noteno) { 
 
    var html1 = ""; 
 
    html1 = "<div class='note-panel dragme' id='" + noteno + "'><div class='panel panel-primary'><div class='panel-heading'><h3 class='panel-title'>" + title + "</h3></div><div class='panel-body'>" + content + "</div></div></div>"; 
 
    $("#noteBoardInt").append(html1); 
 

 
    $("#" + noteno).css("top", y + "px").css("left", x + "px"); 
 
    addDrag(); 
 
    } 
 

 
    function addDrag() { 
 
    $(".dragme").draggable({ 
 
     scroll: false, 
 
     containment: "#noteBoardInt", 
 
     handle: ".panel-heading", 
 
     stop: function(event, ui) { 
 
     var noteBox = $(this) 
 
     var position = noteBox.position(); 
 
     var leftPos = position.left; 
 
     var topPos = position.top; 
 

 
     var noteNo = noteBox.attr("id"); 
 
     updateDatabase(leftPos, topPos, userName, noteNo); 
 
     } 
 
    }); 
 
    } 
 

 
    function addToDatabase(userName, title, content, noteNo) { 
 
    //Do the ajax to add record of the item to the database 
 
    var x = 0; 
 
    var y = 0; 
 

 
    $.ajax({ 
 
     url: "/myaccount/sw/note-ajax.php?command=add&username=" + userName + "&title=" + title + "&content=" + content + "&x=" + x + "&y=" + y + "&usernoteno=" + noteNo + "", 
 
     success: function() {} 
 
    }); 
 

 
    } 
 

 
    function updateDatabase(x, y, username, noteno) { 
 
    $.ajax({ 
 
     url: "/myaccount/sw/note-ajax.php?command=edit&username=" + userName + "&x=" + x + "&y=" + y + "&usernoteno=" + noteno + "", 
 
     success: function() {} 
 
    }); 
 
    } 
 
</script>