0
Bisher habe ich ein Container-Div, das eine Schaltfläche enthält, und wenn die Schaltfläche klickt, erstellt es ein Div mit einer ID = "newcard", die veränderbar ist (dieser Teil funktioniert "richtig"). Jedoch, wenn ich das Ziehen des div-Elements integriere, wird einfach nicht gezogen. Irgendeine Hilfe?Div erstellen und ziehen innerhalb 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>
Ihre zweite Anweisung innerhalb der Funktion ist außerhalb Umfang der inneren Funktion, deshalb wird das Element nicht ziehbar immer in Ihrem Skript. – Ozan
ist es innerhalb der Hauptfunktion? Die ID "newcard" bezieht sich auf alle neuen Kartenelemente. –
Ja ist es. '$ (function() { \t $ ("createcard.") Klicken (function() { \t \t var DOMElement = $ ('
');.'. Notecard-Container' \t \t $() .append (DOMElement). \t $ ('# Newcard') ziehbar(); \t}); }); ' – Ozan