Estou com um problema com draggable. o código funciona normal! mais quando eu adiciono via jquery um novo código o draggable não funciona!
O que pretendo fazer:
Eu quero criar um construtor de html de forma que eu coloque os elementos e possa distribuir ele aonde eu quiser no corpo do HTML como um WIX porem mais simples! o draggable deixa eu arrastar o elemento na tela como eu quero. porem se eu adicionar um novo elemento via jquery este elemento fica travado! vou deixar meu codigo que está funcionando 'EM PARTE':
Me ajudem por favor!
este é o index:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> </head> <body> <iframe src="template2.html" width="1000px" height="600px"> </iframe> </body> </html>
Este é o iframe:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
*, *:before, :after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.clearfix:after {
content: '.';
display: block;
clear: both;
height: 0;
font-size: 0;
line-height: 0;
visibility: hidden;
overflow: hidden;
}
body {
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 20px;
}
/* Drag e Drop system */
.drag-container,
.drop-container {
width: 50%;
background: #333;
font-size: 0;
text-align: center;
float: left;
color: #fff;
height: 190px;
}
.drag,
.placeholder {
font-size: 12px;
width: 90%;
height: 50px;
line-height: 50px;
background: #0074a2;
margin: 10px auto;
}
.drop-container {
background: #222;
}
.drop-container p {
font-size: 18px;
line-height: 190px;
}
.placeholder {
background: none;
border: 1px dotted #eee;
}
.lixeira {
margin: 20px 0;
background: #ddd;
border: 2px dotted #999;
text-align: center;
line-height: 50px;
color: #999;
font-weight: 700;
font-size: 18px;
}
.lixeira-ativa {
border: 2px dotted red;
}
</style>
<script>
$(function(){
$('.drag').draggable();
$('.drop-container').sortable({
placeholder: 'placeholder',
activate: function(event, ui){
$('.drop-container p').remove();
}
});
$('.lixeira').droppable({
hoverClass: 'lixeira-ativa',
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
$('.salvar').click(function(){
var valores = new Array();
$('.drop-container .drag').each(function(){
valores.push( $(this).html() );
});
alert(valores);
});
});
function addText(){
$(".drag-container").append("<div class='drag' style='position:relative;'><p>Test</p></div>");
}
function addImg(){
$(".drag-container").append('<div class="drag"><img width="30px" height="30px" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" /></div>' );
}
</script>
</head>
<body>
<button onclick="addText();">ADD Texto</button>
<button onclick="addImg();">ADD Img</button>
<div class="drag-drop clearfix">
<div class="drag-container clearfix">
<div class="drag">1</div>
<div class="drag">2</div>
<div class="drag">3</div>
</div> <!-- .drag-container -->
<div class="drop-container clearfix">
<p>Arraste números aqui</p>
</div> <!-- .drop-container -->
</div> <!-- .drag-drop -->
<div class="lixeira">
Arraste aqui para apagar
</div> <!-- .lixeira -->
<button class="salvar">Salvar</button>
</body>
</html>
Vou disponibilizar um link online para vocês observarem o problema!
Segue o link