mi problema es que quiero eliminar los clones de unas imagenes que tengo, pero al agregar el codigo para eliminarlo solo me elimina el original mas no el clon alguna sugerencia? el codigo es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title></title>
<meta name="description" content="ahmsa" />
<!-- import necessary libraries -->
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.3");
</script>
<!-- Include stylesheets -->
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//When first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
}
}
});
$(".drag .eliminar").click(function(){
$(this).prev().parents(".drag").animate({ opacity: 'hide' }, "slow");
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="options">
<div style="height:550px;width:200px;overflow:scroll;">
<div id="drag1" class="drag"><img src="images/a1.png" /></div>
<div id="drag2" class="drag"><img src="images/a1.png" /><span class="eliminar" alt="cerrar"><img src="images/close.gif"/></span></div> <!-- end of drag2 -->
<div id="drag3" class="drag"><img src="images/a1.png" /></div> <!-- end of drag3 -->
<div id="drag4" class="drag"><img src="images/a1.png" /></div> <!-- end of drag4 -->
<div id="drag5" class="drag"><img src="images/a1.png" /></div> <!-- end of drag5 -->
<div id="drag6" class="drag"><img src="images/a1.png" /></div> <!-- end of drag6 -->
</div>
</div>
<div id="frame">
<span id="title">
<h2> </h2></span></div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>
