0
到目前爲止,我有一個容器div,它包含一個按鈕,當按鈕被點擊時,它會創建一個帶有可調整大小的set ID =「newcard」的div(這部分工作正確)。但是,當我合併拖動div元素根本不會拖動。任何幫助?在div中創建和拖動div
$(function(){
\t $(".createcard").click(function() {
\t \t var domElement = $('<div id="newcard" ></div>');
\t \t $('.notecard-container').append(domElement);
\t });
\t $('#newcard').draggable();
});
body, html {
\t margin: 0;
\t padding: 0;
}
.container {
\t position: absolute;
\t left: 0;
\t top: 0;
\t width: 100%;
\t height: 100%;
\t background: rgb(255, 255, 255);
}
.createcard {
\t bottom: 5%;
\t left: 5%;
\t width: 125px;
\t height: 45px;
\t background: rgba(255, 255, 255, .0);
\t position: absolute;
\t display: block;
\t border: 1px solid transparent; \t
\t
\t outline: none;
\t font-family: 'Nunito', sans-serif;
\t font-size: 20px;
\t font-weight: bold;
\t -webkit-transition: .4s ease;
\t -moz-transition: .4s ease;
\t -o-transition: .4s ease;
\t -ms-transition: .4s ease;
\t transition: .4s ease;
\t transition: .4.0s
}
.createcard:hover {
\t background: rgba(255, 255, 255, .9);
\t
\t border-radius: 5px;
\t border: 1px solid #c0c0c0; \t
\t
\t -webkit-transition: .4s ease;
\t -moz-transition: .4s ease;
\t -o-transition: .4s ease;
\t -ms-transition: .4s ease;
\t transition: .4s ease;
\t transition: .4.0s
}
#newcard{
\t position: absolute;
\t width: 150px;
\t height: 150px;
\t min-width:150px;
\t min-height:150px;
\t max-width:300px;
\t max-height:300px;
\t top:10%;
\t left:10%;
\t background: white;
resize: both;
overflow: auto;
}
.notecard-container {
\t position: absolute;
\t top: 7%;
\t left: 2%;
\t right: 2%;
\t bottom: 2%;
\t background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
\t rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="aos.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
\t <div class="container">
\t \t <div class="notecard-container">
\t \t \t <button class="createcard" id="createcard">New Card</button>
\t \t </div>
\t </div>
\t <!-- Input JavaScript and jQuery -->
</body>
</html>
你在函數內部第二個語句是內在的功能,這就是爲什麼該元素是不是成爲你的腳本可拖動之外的範圍。 – Ozan
它在主要功能之內? id,'newcard'指的是所有newcard元素。 –
是的。 '$(函數(){ \t $( 「createcard」。)點擊(函數(){ \t \t變種一個DOMElement = $( '
');'。notecard容器' \t \t $() .append(一個DOMElement); \t $( '#NEWCARD')可拖動(); \t}); });' – Ozan